Question

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 configuration 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 ??

Answer 1

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.