Leaner style sheet(LESS)

Leaner style sheet(LESS) is a dynamic preprocessor style sheet language that can be compiled into cascading style sheets (CSS) and run on the client side or server side.

It is a backwards compatible language extension for CSS. It only makes a few convenient addition to CSS. One of the major feature is that it is completely open source.

It provides following mechanism:

• variables
• mixins
• Functions
• nesting
• operators

The main difference between LessDynamic preprocessor and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

Advantages 

• CSS can be easily generated with LESS which works across the browser.
• Through nesting we can write better and well organized code by using LESS.
• By using variables Maintenance can be achieved faster.
• It enables you to reuse the whole classes easily by referencing them in your rule sets.

Features

• It helps to write cleaner and more readable code in an organized way.
• We can define styles and it can be reused throughout the code.
• It is based on javascript and is a superset of CSS.
• Reduce code redundancy.

These are the Various mechanisms:

Variables : We can set a constant variable while programming so that we can call the variable throughout the program. we can do the same with it.
Mixins :This function allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.
Nested rules: You can simply nest selectors inside other selectors. These can save you a lot of coding, and they make your code clearer.
Namespaces for grouping variables: This is very useful if you want to avoid naming clashes
Operators and functions: These functions let you create CSS properties mathematically.
Let’s take an example, we want element B to be two times higher than element A. In this case, we can write the code as:

So we can say, Leaner style sheet(LESS) is better than the CSS because all CSS code is valid in it, but there are additional elements in it which is not be valid in CSS. This is very good because your existing CSS is already valid LESS code, minimizing the learning curve to using LESS.

Installation of Leaner style sheet(LESS)

Step 1 − We need NodeJs to run LESS examples. To download NodeJs, open the link https://nodejs.org/en.

Step 2 − click on the setup to install the Node.js on your system.

Step 3 − To Install LESS on the server via NPM (Node Package Manager). Run the following command in the command prompt. The files will installed then.

Compiling Less files to CSS

For compiling less file to css we use below syntax for the file named style.less:

Comparison between LESS and CSS

CSS is a process of taking the code that defines the style and layout of the web page on a website and placing the code inside a single file in the database. The CSS file is referenced by every html page on a Website and complication of duplicating the style information on every page.

when it comes to web page formatting and designing ,CSS is much simpler and basic.
CSS is a static language,so we cannot write if-else or any other loops and other programming constructs.
LESS is a pre-processor of CSS. Moreover, it runs on client and server side. It extends the standard syntax of CSS because it adapts CSS-Block formatting Syntax. It means that LESS has everything that CSS is missing.

You will get more about this from here.