LESS is better

I know a lot of web designers have heard of LESS but haven’t actually got around to using it. LESS is a great way of making your stylesheet more concise and reusable.

To start using LESS you will need to use the less.js file which can be found on their website, and the .css file you would usually use will now be .less.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Variables

First lets get started with the simple variables. This is basically the same as defining your variables in php. Instead defining the same colour over and over again for various element on your page.

<!--LESS-->
@grey: #353535;
p{color:@grey;}
a:hover{color:#fff; background-color:@grey;}

p{color:#353535;}
a:hover{color:#fff; background-color:#353535;}

The beauty of this is that if you decide that you want to change the colour for everything with #353535 you will only need to change it once.

Mixins

Mixins are a great way of defining all the properties of one class with another. This is especially useful when you are using CSS3 element with the browser prefix. Imagine writing out the css border radius or transition with the browser prefix multiple times!

<!--LESS-->
.transition (@transition: all 0.6s ease-in-out)
-moz-transition: @transition;
-webkit-transition:@transition;
-o-transition:@transition;
transition:@transition;
}

img {.transition;}
img:hover {.transition(all 0.2s ease-in-out);}

There are other uses with LESS including Nested Rules and Functions and Operations, but this can be a bit tricky if you haven’t fully grasped the concept. So I shall leave you with this quick overview on variables and mixins for you to have a play around with.