Making CSS easier with LESS
18th June 2013
Web Development

Making CSS easier with LESS

Sometimes writing Cascading Stylesheets (CSS) can be a frustrating exercise, so that’s why coming across something that will significantly boost your productivity and un-boggle your brain, can be so satisfying.

When a colleague stumbled upon a dynamic stylesheet language called LESS, it highlighted major flaws in writing stylesheets the old fashioned way. I specifically remember saying to myself “This is how CSS should be!”

What is LESS?

Basically LESS is a language that allows the use of dynamic code that is then compiled into a static CSS file which can then be read by the web browser, just like any normal CSS file that you would create.

How does this help?

With CSS you find yourself repeating a lot of the same properties and selectors to accurately style the website your are creating. The large number of CSS properties and all the different browser engines also make it hard to remember what you need to use. Searching through websites and documentation can significantly eat away at your time.

This is where the dynamic potential of LESS comes into play. Much like you would for other coding languages (PHP, ASP etc.), LESS allows you to set variables and create functions that you can then use throughout your stylesheets. This alone significantly cuts down the CSS you have to produce, allowing for the re-use of styling you have previously used within the stylesheet.

The example below shows how you can set a colour value into a variable and call it multiple times throughout the stylesheet.

LESS CSS Example

@color: #FFDD43;

p {
     background-color: @color;
}

.button {
     color: @color;
}

Compiled CSS

p {
     background-color: #FFDD43;
}

.button {
     color: #FFDD43;
}

What else does it do?

Another handy feature of LESS is that it allows you to tier selectors inside other selectors to easily specify inheritance. This is something that I thought was always cumbersome with normal CSS, having write and re-write long selector names.

LESS CSS Example

.article {
     width: 500px;
     
     p {        
          font-size: 12px;
     }
     
     .button {
           background-color: #000000;        

           a {                 
                 color: #000000;               
                 text-decoration: underline;           
           }
     } 
}

Compiled CSS

.article {
     width: 500px;
}

.article p {
     font-size: 12px;
}

.article .button {
     background-color: #000000;
}

.article .button a {
     color: #000000;
     text-decoration: underline;
}

Any more handy stuff?

Yes, there is plenty of other awesome features of LESS that make your life as web developer a lot easier. A few more are:

Mixins

This allows you to quickly include the properties from any selector, saving you from re-typing them all for similar elements. You can also use parametric mixins, letting you pass in variables creating dynamic values for parameters that you use a lot.

Functions & Operators

LESS also has a number of built in functions and operators that can be used to manipulate CSS as well as apply complex calculations to colours and values.

Minify

To reduce the size of your CSS files you can choose for LESS to compile your files into a minified format, removing un-needed spacing, comments etc. to make your website load quicker. The added benefit of this is that your original LESS file is kept intact so its easy for you to read, comment and modify.

There are plenty of other functionality that LESS offers so for the full list and more information on the ones I mentioned above, you can head over to their website.

Are you converted?

There are a lot of developers out there that hate CSS and I think that is mainly because it can be very repetitive and time consuming when it really shouldn’t be. Thankfully, some clever people feel the same way and have come up with a way to make our lives easier.

Give it a try and you’ll wonder how you went so long with out it.