Using LESS for CSS
Using LESS for CSS
As I have said in my past articles, we live in a world where rapid development of web applications is an important factor. We need to be able to construct big things in short amount of time. This is why, we need to learn to use tools that helps us obtain these kind of things.
What is LESS ?
Think about LESS as the CSS for programmers. LESS allows you to create your css in a more dynamic way. Imagine the next situation: You have developed a website with 5000 lines of css. This is a huge style, right ? Your website looks shiny, pixel perfect and let’s say that the theme of the website is based on blue and its related colors. Everything looks perfect, but the client wants to change the theme to green. BOOM ! Imagine yourself in the situation of searching for blue colors in that huge file, and replace them line by line with green. A very time consuming task, I would say.
I will present three kinds of tools when choosing to use LESS syntax. One is LESS.js, another one is SimpLESS, and the last one is PHP LESS. We will talk about them separately below, but first let’s see the syntax for LESS.
Example of LESS code
1 2 3 4 5 6 7 8 9 10 11 12 |
@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; } |
You see already something strange going on, eh ? Less is derived from css syntax. Let’s take a look on the above syntax. On the first line, we defined a LESS variable called “color-base” with the value of “#2d5e8b”. In LESS, variables are defined with “@” in front of them. Now we have a variable inside our style.less document, and we can use it in later on css declarations. We see further on, that our “class1” is using the variable name for setting the background-color. You can already imagine the possibilities that you have by declaring variables in css. Your blue-green problematic change should take only 5 seconds now if you think good from the start with LESS. This is pretty amazing, right ?
LESS knows more than this. It knows about mixins also.
Mixins
1 2 3 4 5 6 |
.round3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } |
We have declared a class of “round3” that we can apply on our elements to create rounded corners. In LESS, we can use that class name, inside other css’s body declaration like this:
1 2 3 4 5 |
div { .round3; border: 1px solid #555; border-radius: 3px; } |
Now, all the divs from our website will have also rounded corners, because we called the .round3 class for them.
LESS math
LESS knows about math too. You can declare a variable and that one you can increment. Let’s see an example:
1 2 3 4 5 6 7 8 |
@the-border: 1px; @base-color: #111; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } |
Nested Rules
Rather than constructing long selector names to specify inheritance, in LESS you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
1 2 3 4 5 6 7 8 9 10 11 |
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } |
Ok, you see all the possibilities of this wonderful LESS, and you can think how many great stuff you can do with it. After you wrote your code in a “style.less” file, you have to compile it, and obtain “style.css” from it. Lets talk about the possible ways of obtaining that.
LESS.js to the rescue.
Using LESS is really easy. We only need this two lines inside the head
tag of your HTML document. First, the .less file then the less.js
library at the bottom (which you can download it from the official site).
1 2 |
<link rel="stylesheet/less" type="text/css" href="style.less"> <script src="less.js" type="text/javascript"></script> |
Pretty simple, the less will be compile in every client’s browser. It is very fast.
SimpLESS as an alternative solution.
You can download this tool from the official site here, and install it on your pc. You just import the “style.less” file into it, and it will generate a “style.css” file that you include as a normal css in your app.
PHP LESS.
This solution is for server side compiling the less file. You need to install LEAFO in your php app (a class for compiling less files). You can take it from here.
The flow is the next one:
1 2 3 4 5 |
<?php require "lessc.inc.php"; $less = new lessc; $less->checkedCompile("input.less", "output.css"); ?> |
Pretty basic, usefull and fast. You can setup variables here also like this:
1 2 3 4 5 6 7 8 9 10 |
<?php $less = new lessc; $less->setVariables(array( "color" => "red", "base" => "960px" )); echo $less->compile(".magic { color: @color; width: @base - 200; }"); ?> |
More in the docs here.
Summary.
I have presented to you, some ways of dealing with LESS files, and you learned the syntax and possibilities of this great thing. Hope you liked it.
Bye bye ! 🙂