Skip to Content

The author

Epiphany Search

As somebody who writes <em>a lot</em> of CSS, I always find it interesting to try out ways to make my job easier, or make my CSS more efficient. I recently came across LESS CSS, which “extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the client-side (IE6+, Webkit, Firefox) and server-side, with Node.js.”

As somebody who writes a lot of CSS, I always find it interesting to try out ways to make my job easier, or make my CSS more efficient. I recently came across LESS CSS, which “extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the client-side (IE6+, Webkit, Firefox) and server-side, with Node.js.”

Variables

By using LESS, I am able to do a few nice things which are currently absent from the CSS specification such as using variables. For example, I’m currently working on a project where all of the colours for the site are yet to be signed off by the client. If I was using LESS CSS I would of been able to define a variable at the top of my stylesheet for each colour and then just reference that variable wherever I’d like to use the unconfirmed colour. To do so I would write something like the following (LESS) CSS to define my variables: [code lang="css"] @blue: #52aff0; @light-blue: #8acfff; @red: #e11d1d; @green: #42e11d; [/code] I could then use these variables in my CSS using the following syntax: [code lang="css"] #main-content h1 {color: @light-blue;} #main-content ul li:first-child{background-color: @red;} [/code] The benefit of being able to use variables is it makes it easier to update the colour should the client/designer not be happy with it. Without variables I would need to do a mass find & replace for the old colour.

Mixins

Another useful feature of LESS is‘Mixins.’ Mixins allow me to define a few generic styles and then apply those styles to another element without having to add that class to the HTML. For example, I could create a style called ‘highlighted’: [code lang="css"] .highlighted { text-style: italic; padding: 0 5px; color: #fff; background: @light-blue; } [/code] I could then add all these styles to another element by doing: [code lang="css"] aside h2 { float: left; margin: 0 0 20px 0; .highlighted; } [/code] Mixins can also accept parameters which kind of turn it into a CSS version of a JavaScript function. For example, when using any CSS3 properties, I always ensure I put in the browser specific prefix’s to ensure older browser versions work. So normally I would have to write something like this: [code lang="css"] #top { border-radius: 0.6em; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; } [/code] I would need to do this every time I wanted to use a border-radius (rounded corner). If using LESS CSS I could set up a parametric mixin: [code lang="css"] .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } [/code] Then in my CSS, I could write the following and have LESS CSS spit out the browser specific prefix’s each time: [code lang="css"] #top { .border-radius(0.6em); } [/code]

Problems

While the above features are great, I did run into a couple of problems when trying out LESS CSS. First of all I noticed that if there was a single error in my syntax, the website wouldn’t show ANY of my CSS and revert to the unstyled version. With no error messages to work on, and with it not being valid CSS meaning, I could not run it though a W3C validation tool to find errors; it could therefore prove difficult to find syntax errors in a complicated (or long) style sheet. Another minor problem I noticed was due to it having it’s own syntax, my text editor of choice (in this case Komodo Edit) would not recognise it as valid CSS, so would underline the majority of my styles in red. On the plus side there may be a plugin for Komodo Edit out there to add LESS as a language. Along with my text editor not being able to understand it, I imagine if a colleague were to take over a project where I’ve used LESS CSS, they would probably have a similar problem, particularly if I had used nested rules as they can make the CSS look significantly different.

Conclusion – Would I use it?

I’ve just written about the aspects of LESS I would personally use; however, there are a load of other things it can do which you can read about on the official documentation. If I limited myself to just the variables and mixins I would probably use LESS CSS on a project. But I think to use some of the other features such as nested rules would probably over complicate my stylesheet and make debugging errors a nightmare. Have you used LESS CSS? If so, please share your experience below or on Twitter - @_davesellers