Thursday, May 24, 2012

using variables in css - CSS Pre-Processors

Have you ever felt that CSS should be more powerful, having variables, expressions, code reuse capability between classes and other such stuff. If yes then here is an option to do all that. I stumbled to it a few days back and found it to be quite impressive.
Less - The dynamic stylesheet language, lets you to specify widely used values in a single place, and then re-use them throughout the style sheet.

Below is a simple example of LESS code:

// LESS
@color: #4D926F;
#header
{
     color: @color;
}
h2
{
     color: @color;
}
/* Compiled CSS */
#header
{
      color: #4D926F;
}
h2
{
     color: #4D926F;
}

 LESS offers a lot more than this. To know more check their website...

Edit 28th Oct, 2012:

I just found that Less is not alone and its one of the members of family called CSS Pre-processors. I also read a very nice blog post from Miller H. Borges Medeiros illustrating some drawbacks of using these.

No comments:

Post a Comment