If you have never heard of the name then don’t worry as it’s still a fairly new concept as far as CSS goes, basically a smart man by the name of Alexis Sellier came up with the idea of designing a language in which was essentially CSS but kind of looks like JavaScript. In a nutshell LESS allows for a much smaller but more comprehensive stylesheet without repeating properties or grouping elements, instead it allows you to define vars, functions and even namespaces which is a favourite of mine already.
Unlike using normal syntax LESS allows you to code using a specific design pattern using nested selectors and function references that allow for default and custom arguments, when you think about how much time you spend coding vendor prefix specific syntax and other properties you really can start to see the bigger picture and why using LESS can improve the overall time in which it takes to develop a stylesheet.
So basically as an overview I’ll show a few examples of standard CSS syntax and LESS syntax, in the first example I’ll show you a very simple way to define a text color once for use within multiple selector instances without creating any redundancies or overhead.
Normal Syntax
p { color: #000; }
a { color: #000; }
LESS Syntax
@color: #000;
p { color: @color; }
a { color: @color; }
Already you can see how easy it is to define a var with a specific color and call it multiple times without the need to set “#000” over and over again, so now you know how that works how about we try something a little harder.
Remember how i said LESS allows for functions which can contain default and custom arguments?
Well LESS makes it as easy as creating a class that looks sort of like a JavaScript function, one thing to be aware of is like other programming languages LESS follows the same rules when it comes to scopes so be aware of you local and global scopes as they can overwrite one another. To start off with I’m simply going to use a nice example directly from LESS but with a tweak so you can’t see the arguments in action straight away.
Normal Syntax
div { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
span { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
LESS Syntax
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
div { .border-radius; }
span { .border-radius; }
If you think that was simple then your right, it was dead simple. The power of this very simple internal language is quite jaw dropping as it’s like nothing else ever designed for CSS but works so beautifully that you can be a designer and still have elegant code. However i have one more example to show you, i have gone through vars and functions but namespaces like i said before are already a personal favourite of mine.
They allow for function references that can only be called by first defining the namespace in which the function exists in, it’s a bit like how OOP works in PHP but without the backslashes and such. So basically in this example it will use the same example as above but instead i will set a custom radius function for each property (W3C, Firefox and WebKit).
Normal Syntax
div { border-radius: 5px; -moz-border-radius: 10px; -webkit-border-radius: 15px; }
span { border-radius: 5px; -moz-border-radius: 10px; -webkit-border-radius: 15px; }
LESS Syntax
#border-radius () {
.w3c (@radius: 5px) { border-radius: @radius; }
.moz (@radius: 10px) { -moz-border-radius: @radius; }
.web (@radius: 15px) { -webkit-border-radius: @radius; }
}
.border-radius (@w3c: 5px, @moz: 10px, @web: 15px) {
#border-radius > .w3c(@w3c);
#border-radius > .moz(@moz);
#border-radius > .web(@web);
}
div { .border-radius; }
span { .border-radius; }
So as you can see LESS is very powerful in the respect of what is possible and how you can use it effectively, in the long run this will save you a lot of headache and frustration just because it is so simple to use and saves you a lot of time. Currently the main 2 ways to compile the .less file for your website is by using a server side compiler or a JavaScript compiler, both do the exact same thing but server side is much fast and works with JavaScript turned off in the browser.
There are also also a couple of other compilers out there now but my personal favourite is one called “less“, essentially it does what you would expect the server side and JavaScript compilers to do but instead you can get a live and updated compiled .css file while editing your website locally without ever having to push a button more then one to initiate the compiler. You can find this app which currently is only supported on Mac’s at the following URL:
If your a Windows user there is another compiler called SimpLESS which is still fairly new but works exactly the same, you can download it at the below URL:
If you would like to know more about LESS please see the following URL and hope you enjoyed the article.
