CSS with Less.js
One of the drawbacks of CSS is its lack of variables and functions. To change a color that appears in several selectors in your site, changing that color would mean modifying every selector it appeared within. Recently, the use of CSS pre-processors have gained in popularity. Two of the more popular solutions, Less and Sass, started out as Ruby Gems that take code written in their own syntax and then recompiles it into valid CSS that your web browser can use. The main problem with both, is that you can't use native Less or Sass files in your browser. But there is now a way to run Less in your browser without a recompile.
Less.js is the new version that will replace the current default Ruby gem when it reaches version 2.0. It currently is at version 1.0.40. It has many of the current features of the Ruby version but has a few new ones as well. Completely re-written in Javascript, it will not only run within a browser but also on a server with node.js. Although it is still in early development, many sites are taking advantage of it today.
Some of the command line options are not yet available in the Javascript version, but it can still compile your Less source into valid CSS. But unlike the Ruby version, a recompile isn't necessary since it can be used in the browser just by including a call to the script in your source like you would with any other Javascript file. To take advantage of it in your browser, just include the script in the head of your page like you would for any other javascript.
A few things to note, first make sure the rel of your link tag is set to "stylesheet/less" and that your Less stylesheet ends with a .less extension. You can pick up the latest version of Less.js from most code repositories but you can also include a link to googlecode. Just be sure to check the version, currently the latest they have posted is 1.0.35.
Now you can take advantage of some advanced coding practices that were not availalbe in plain CSS before. With variables and mixins as part of its syntax, you can write much leaner CSS that will render correctly in all browsers. Variables in Less are declared by prepending the '@' symbol. With mixins, you can write complex CSS3 styles that can take arguments and be reused throughout your site. Nesting your code can reduce the amount of horizontal coding you do, greatly saving time while developing. Let's take a look at the following example.
@color: #3879BD;
.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded(5px);
a {
color: @color;
&:hover {
color: #000;
}
}
}
this code will compile to
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header a {
color: #38798D;
}
#header a:hover {
color: #000;
}
As you can see, using Less can greatly reduce the amount of time you spend writing and especially modifying CSS. Even if you don't want to rely on Javascript to render your CSS, using Less while developing can decrease your coding time. Then you can recompile and deploy as standard CSS.
