LESS is more

LESS is more

I have been using LESS for a while now, I first started using it when I was creating a website for Bootstrap 2.3.2 last year. At first it was a bit of a steep learning curve, but then it became easy and now I find normal CSS a bit odd.

If you dont know then here is a bit of a background on LESS. It is basically a pre-processor for CSS, enabling me as a developer to create vast dynamic style sheets for all sorts of media queries and have them compiled into one CSS file. Each time I embark on a project using LESS I try and make more and more of the abilities of LESS.

It allows you to create variables that you can re-use throughout your code, meaning changing a brand colour happens in one place, not hundreds. Also you can create mixins, which are like LESS functions, so say I want a box shadow on a div, instead of putting all the different styles in for each browser I can call one function that will put all of them in for me, but I just write one line of code. You can also write mixins that you can pass variables into, making mixins dynamic and powerful.

Simple things make keeping your code neat and tidy very simple, for example if I have multiple divs with classes that do the same thing but may have a different background colour:

<div class="container-liquid"></div>
<div class="container-liquid purple"></div>

So in the above example I have two divs, container-liquid has a default background colour on it, plus other positioning styles, and I want to use the exact same styles apart from the colour of the background. So in LESS you can do the following:

.container-liquid {
     &.purple {

The code example above simply means that using the “&.classname” syntax you can alter the styles of any div if you have other classes defined but not have to repeat chunks of code each time that do the same thing.

So you can just change the bits you need, giving meaning to the phrase “less is more”, less coding more productivity!

Check out more about LES here.