Getting Started with LESS CSS

Today I come with the tutorial series for LESS CSS. In this first part of LESS CSS series, you will get idea about the LESS CSS and how to use it.Throughout the series,I will explain LESS CSS in depth by creating demos.

Introduction of LESS CSS

CSS is very simple way to create styles for application whereas LESS is a open-source CSS pre-processor which extends the css with dynamic way using variables, mixins nested rules and operations.

Definition from the official site:

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.Less runs inside Node, in the browser and inside Rhino.

How to Use:

First of all, download less.js file from it’s official site http://lesscss.org/. After downloading file, create .less file instead of .css file.

Next,You need following two lines inside the head tag of your HTMLdocument and order of file inclusion is importing while adding files.First add the .less file then the less.js library at the bottom of it.

LESS.js will send ajax request to process the less code and convert the code into CSS and send response with the compiled CSS.Browser will render compiled code in the page.

That’s it. We are done with setup. You can start to write code into your .less file, the compiler will automatically generate the regular CSS in .css format when browser render page.

Wrap Up:

This first part is give you basics idea about LESS and setup of it. Stay tuned for the next part of the series.Next series is to use the variables in the LESS CSS.

Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.