Thursday, June 20, 2013

A few reasons why I use LESS

Last year I was introduced to LESS. It's a great way to write CSS as it allows you to nest your styles, set variables, and much more. The first reason I prefer LESS over standard CSS is variables. It's a simple feature that's really helpful. Say you want to use #fd0100 as your value for red. In CSS this would require ensuring that any time you change the red value in one CSS rule you should check for other instances that the same value was used and then update them accordingly. With LESS you simply need to define what your red value is:
@red: #fd0100;
Next up is imports. When using LESS you can split your CSS rules accross multiple files to make them more manageable. Then when you come to build your project you can have them all build into a single CSS file. For example, in the project I'm working on I have a main.less file that imports the following:
@import "reset";
@import "colours";
@import "mixins";
@import "tablet";
@import "desktop";
Mixins are another great feature for LESS. Using mixins you can write little chunks of re-useable CSS. In this little example I have a mixin that sets border-radius using browser specific rules as well as the standard CSS rule. The default radius is 4 pixels but the mixin can have any other valid value passed to it.
.border-radius(@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;