So today I decided to get involved in LESS. I’ve been graduated almost 6 months now and I feel that my both CSS3 and HTML5 skills are sufficient enough for me to concentrate on learning another front-end language.

If you are reading this as a graduate or someone who is inexperienced in Web Dev I would strongly recommend that you really get to grips with HTML5 and CSS3 first. I thought I knew it all when I left university, I knew nothing. This book was very insightful and a fantastic learning resource.

LESS is basically, in my mind, a “better, faster and easier way to write CSS”. About 90% of it is just standard CSS but there are several features that extend and improve CSS. I was a bit skeptical about how hard it would be to learn and would I even favor it over my beloved traditional CSS.

I will start with a few scenarios.

P{color:red;}
.something h3{color:red;}
ul li{color:red;}

Lets say you have a huge stylesheet with hundreds of lines of code and colours. Imagine if you wanted to change a colour. Take a look at the following code and you will see a basic but unbelievably powerful LESS example

@colour:red
P{color: @colour;}
.something h3{color: @colour;}
ul li{color: @colour;}

If you are familiar with JS or PHP you will see that this is a variable. It allows you to specify values in a single place and re-use them throughout the document.

Everyone knows how good CSS3 properties are. The thing what annoys me is having to write all the different vendor prefixes each time to ensure cross browser compatibility. LESS mixins sort that out

.rounded-corners (@radius:5px){
-webknit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

.box{
.round-corners;
}
.box2{
.round-corners(10px)
}

You can see how much time that little beauty can save. Mixins are like variables but can be used for whole classes. The other advantage is that they behave like functions and can take arguments as shown in the example.

Because I love keeping things neat and well organized this next feature is right up my street.

.header h1{}
.header nav{}
.header li{}

You don’t need to write out the class each time with LESS because it has something called nested rules. With nested rules you can nest selectors inside other selectors for example.

.header{
   h1{}
   nav{}
   li{
    a{
     &:hover{}
     }
    }
}

Cool eh! Not only does it look clear it will also make stylesheets shorter and save so much time. So there is some basic LESS syntax which demonstrates just how useful it can be. There is a hell of a lot more functionality and I’m currently in the process of learning it.

The main aspect of LESS which I found quite confusing at first is why a JS file is needed to make it work. Basically you write LESS code in a document entitled whatever.less. The JS then takes this code, remodels it into CSS and spits it out into an actual CSS document, which is in turn read by the webpage. Sound confusing?

There is an easier way though. You can skip the JS stage and just get a application to compile the LESS into CSS every time you save the document. So your documents will include a less file and a compiled CSS document. The tool I am currently using is CodeKit.

Although I do see how useful LESS is going to be, I do currently have some negative views. Firstly the fact that LESS is more like a programming language means that designers will struggle more with the language than developers, I guess they will just have to stick with good old CSS. The most annoying thing for me is the fact that the LESS is compiled into CSS in a format outside of my control. I like to take pride in my code using neat indenting, spacing and comments. Using LESS deprives me of this ability.

I’ve only had a basic play so I’m a complete LESS novice at the minute so that’s all I’ve got to say for now.

• Article
• CSS
• Learning