LESS – Dynamic Style Sheets!!

November 14, 2012

If you haven’t heard of LESS then please read on, it is a fantastic way of organising your CSS style sheets and also making them 100% dynamic.

We all know what it’s like when writing CSS + HTML, you use the HTML to identify the elements needed to structure your page and the use the CSS to select those elements and apply styles to them. This process can be a little tedious and also is time consuming when styling the elements, obviously there many ways that you can make this process a lot easier.

Today we have the LESS option, this is basically going to make your CSS a lot easier to work with and quicker to write. LESS allows you to set variables, create mixins, nest your rules and also use functions and operations.

This week we will concentrate on the Variables and go into detail on how they work and how they can be used within your CSS:

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code. (this was taken from the official LESS website)

Take this as an example…..lets say you had 1 particular colour that you wanted to use for many elements within your CSS, normally you would search the hex colour and then use it many times against many elements. With LESS, you define a series of variables in the beginning such as @color: #00aeff; then once that is defined you simply apply it like this within your CSS:

#header {
color: @color; /* this will make the color of the header the color that was defined within the variable */
}

#logo {
color: @color; /* again it uses the same principle but applies it to the logo element */
}

The Above CSS will use the variable ‘color’ within different elements without you having to search out the HEX colour and type it in over and over, if for some reason you needed to change the color then this would make it 10 times easier because all you would change would be the variable for ‘color’ and the elements that have this variable attached to it would be changed automatically! Fantastic structure.

Next week we will cover another section of the LESS CSS framework, thanks for reading! If you are interested in the LESS Framework then please visit their main site.