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.
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.
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.
Below is a small example of Less code.
@border-color: #848484; //gray
border-bottom: 1px solid @border-color;
The above code is compiled to.
border-bottom: 1px solid #848484;
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 a tag.
What happens on compiling?
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.
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.