Introduction
Less tutorial intends to help professionals who would like to make their websites more attractive. To learn Less, users should be familiar with some concepts like word processing using any text editor, creating directories and files, navigating through different directories and developing web pages using HTML/XHTML. In this chapter, one can learn about Less, Less CSS pre-processor and the compilation process of Less file.
Description
LESS is known as a CSS pre-processor that allows customization, managing and reusing the style sheet for a website. LESS is a cross browser friendly and a dynamic style sheet language that extends the CSS capability.
LESS is a scripting language that is compiled using CSS syntax, which can be read by any web browser. LESS is an open source and can build dynamic CSS using the functionalities.
There are many third party tools that allow to compile the files and observe changes.
More Info
In CSS, especially when writing thousands of lines of code for a serious project, duplicating the same rules all over the place and replacing every color change takes a lot of effort to maintain the code and a bit frustrating too.
So, in order to overcome this problem, the web development community introduced CSS pre-processor called Less.
Below are some of the benefits of Less.
- Calculate the values dynamically.
- Faster maintenance can be achieved using variables.
- Functions like manipulating color, converting images for some data URI’s and more can be done easily.
- Clean and well organized code can be written using Nesting.
Example
Below is a small example of Less code.
Less
[c]
@lightblue: #58D3F7;
@border-color: #848484; //gray
@base-font-size: 15px;
body {
font-size: @base-font-size;
}
header {
border-bottom: 1px solid @border-color;
}
a {
color: @lightblue;
}
[/c]
The above code is compiled to.
CSS
[c]
body {
font-size: 15px;
}
header {
border-bottom: 1px solid #848484;
}
a {
color: #58D3F7;
}
[/c]
Description
Below are a few things given in the above sample code.
- The
@symbol is used to define the variables. - The color of the text is defined by
atag.
Description
Since Less is a CSS pre-processor, a user needs to compile it into CSS before using. After compiling the less to css,
- The code gets minified
- Detects the errors
- All files get combined into one file.
- Older browsers get autoprefixes.
Key Points
- The main benefit of Less is: a clean and well organised code can be written.
- By compiling the less code, one can automatically generate the minified CSS code.