LESS is a CSS pre-processor, which means that it composes styles in a dynamic fashion. By allowing you to create a library of variables, functions and other effects, LESS makes CSS writing more efficient by making it easier and faster.
The problem with CSS is that it is very hard to maintain with countless lines of code and numerous files things are bound to get messy quickly, especially when you have to tweak one little change. This is where LESS comes to the rescue.
What does it have to offer?
The overall reason people use LESS, and other CSS pre-processors is their efficiency and time-saving abilities. There are bunches of awesome features/capabilities that LESS has to offer that I just have to tell you about.
Variables
Variables are the number one reason people choose to go with a CSS pre-processor, as unfortunately, CSS does not offer variables itself. Variables in LESS work the same way as they do in any other language, where you pass it a value, and reuse the variable itself so that if you want to change the value, you only have to do so once where you defined it for the variable. In LESS, the syntax for variables is simple; all variables start with the @ symbol. Variable values can be both numbers or strings.
LESS
[css]@fontColor: #262626
@baseFontSize: 12px;
p {
color: @fontColor;
font-size: @baseFontSize;
}
[/css]
CSS
[css]p {
color: #262626;
font-size: 12px;
}
[/css]
Mixins
Mixins are one of my personal favorites and it’s because of their unique function. You should think of mixins as being able to embed a class within another class – this is so much clearer with an actual example. As you can see below I have a class for specific margins, and I can include that class in others as I please. You are totally capable of mixing and matching classes in HTML by giving an element multiple classes – or IDs – but you cannot do that in CSS which I think is a much better way of going about this.
LESS
[css]@baseFontSize: 12px;
@fontColor: #262626;
.monospaced {
font-family: ‘Courier New’, monospace;
}
p {
font-size: @baseFontSize;
color: @fontColor;
.monospaced;
}
[/css]
CSS
[css].monospaced {
font-family: ‘Courier New’, monospace;
}
p {
font-size: 12px;
color: #262626;
font-family: ‘Courier New’, monospace;
}
[/css]
Functions and operations
Operations in LESS perform addition, subtraction, multiplication and division or numbers, colors and other variables. These simple math functions can create pretty complex and interesting relationships between properties. They come in handy when you don’t want to do the math yourself. Functions on the other hand work with JavaScript, which allows for manipulation of variables like no one’s business.
LESS
[css]@baseFontSize: 12px;
p {
font-size: @baseFontSize;
}
h1 {
font-size: @baseFontSize * 2;
}
h2 {
font-size: @baseFontSize + 4;
}
[/css]
CSS
[css]p {
font-size: 12px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 16px;
}
[/css]
Nesting
Nesting is a way of writing code for child elements within their parent elements; unfortunately there is no efficient way to do this in plain CSS except with tedious repetition. If you take a look at the examples below, you’ll see that in order to specify rules for the anchor within the paragraph within the header id – and everything in between – you have to specify these rules again and again. But, in LESS you nest these elements within the parent so that inheritance is clear and greatly improved. One key thing for nesting is LESS is indentation, which makes reading the code so much simpler and easier as well.
LESS
[css]#header {
h1 {
font-size: 2em;
color: #262626
}
p {
font-size: 1em;
a {
text-decoration: none;
color: #444;
&:hover {
text-decoration: underline;
}
}
}
}
[/css]
CSS
[css]#header h1 {
font-size: 2em;
color: #262626
}
#header p {
font-size: 1em;
}
#header p a {
text-decoration: none;
color: #444;
}
#header p a:hover {
text-decoration: underline;
}
[/css]
The installation
Another thing that makes LESS awesome is that it works on both client-side and server-side. The difference between the two is actually quite simple. It is a simple matter of where the code is executed first, whether on a user’s computer once they enter your website or on the server first.
Client-side method
If you have ever linked a stylesheet before, you are familiar with how client-side method is executed. This is perfect for people who do not know much about server-side scripting, and is a very simple method of linking LESS – one of the reasons it is a very well liked pre-processor.
To start, you will need to name all of your LESS files with an extension .less instead of .css.
[css]style.less[/css]
Within your HTML files, you will have to include the LESS stylesheet like you would a regular CSS one. The one exception to this linkage is that in the relation, you specify that it is actually a LESS stylesheet like in the example below.
[html]<link rel="stylesheet/less" type="text/css" href="styles.less" />[/html]
The second thing to follow is the JavaScript file which converts the LESS stylesheet into the ordinary CSS one. You can find this file at the LESS website. One caution is that the LESS stylesheet has to come before the LESS JavaScript file.
[html]<script src="less.js" type="text/javascript"></script>[/html]
Server-side method
Personally, I think it is much easier to manage LESS files through the server-side, so if you know your way around I’d strongly suggest do to it this way. There are also a few other advantages of going about it this way, such as loading speed, but I will not be getting into that. If you don’t know, doing it the client-side method is perfectly fine too as it is much clearer and simpler for those who are unfamiliar with server-side scripting.
You can install LESS on your server through the node package manager – npm.
[html]$ npm install –g less[/html]
Now, that LESS is installed, you need to call the compiler and define the file you wish the new CSS file to be called:
[html]$ lessc styles.less style.css[/html]
Conclusion
LESS is one of many CSS pre-processors out there. This tutorial was meant to give you a taste of what LESS can do for your CSS writing, as it helps a lot in making CSS writing easier, simpler and therefore better. I understand that is a bit different in writing than CSS but I promise it does, in fact, get easier as you use it more often.
