Storing values for CSS properties as variables in an external configuration file

Is there a way I could store values for CSS properties as variables like height/ width of an element as variables in config file so that the they can be easily maintained & there is no need to change css values of elements but just variables in an external configu开发者_开发知识库ration file.

Variables, mainly because if I resize an element & I want that the other elements should compensate for that change, I dont need to chnage all the values but just a single variable !?

Is it even possible ??

This is not possible with standard CSS. It would be possible if you want to use JavaScript to apply style properties dynamically, but a simpler solution could be to use LESS, which is a CSS extension designed to do things exactly like this.

Here's an example:

@myWidth: 100px;

#header {
  width: @myWidth;
}
#footer {
  width: @myWidth;
}

That get's "compiled" into plain old CSS by the LESS script:

#header {
  width: 100px;
}
#footer {
  width: 100px;
}

Obviously, with such a small example there's little benefit, but when you're working with huge CSS files, it can make a massive difference. There are numerous other things that LESS brings to the table, so have a look through the documentation to get an idea of them all.