Less CSS - SPLessons

Chapter 1

Less Tutorial

Less Tutorial

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.


Below is a small example of  Less code.

Less

@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;
}

The above code is compiled to.

CSS

body {
font-size: 15px;
}
header {
border-bottom: 1px solid #848484;
}
a {
color: #58D3F7;
}

About syntax

Below are a few things given in the above sample code.

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,

Summary

  • 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.