less

LESS or Leaner CSS is an open-source, dynamic stylesheet language, which has been influenced by Sass while it influences the new SCSS syntax. It was initially developed in Ruby, but later it was written in JavaScript. The main features of LESS are variables, operators, mixins, functions and nesting. One of the major features that make it different from other CSS precompilers is that it enables real-time compilation through LESS.js via the browser. It is possible to run LESS on both the client and server side, or it could be compiled into basic CSS.

Why Use LESS?

At its core, LESS is still CSS. Using a compiler, it can allow you to do much more. It is possible to apply LESS to sites in many ways. A faster way is through the inclusion of the LESS.js JavaScript file for converting the code. The output CSS is then rendered by the browser. Another way is rendering the code to pure CSS and uploading the CSS to a website. In this case, the LESS.js JavaScript converter is not required.

The LESS Advantage

The unique thing about LESS is that it has everything that CSS is missing. It eliminates CSS through the introduction of features like variables, mixins, nesting and others.

Variables – Set constant variables that could be accessed anywhere in the program. You can set a variable, “@yellow” to add the required color. Use it in the stylesheet. If you need to bring any shade changes, all you have to do is change the @yellow value.

Mixins – Using mixins you can embed different properties of a class into another one by just including the class name as a property. It has some similarities to variables. You can define your mixin and use it wherever you require by changing the value. There is a unique type of ruleset to LESS known as parametric mixins. It accepts only parameters but could be mixed in similar classes.

Nesting – LESS supports nesting selectors within other selectors. The feature lets you save on coding, while enabling you to keep the code neater. There is no need to have the conventional long selectors.

Operators / Functions – These LESS features allow you to create CSS properties. Functions allow manipulation of values by mapping one-to-one with JavaScript code.

Namespaces – The feature enables grouping mixins and variables. It is quite effective in helping avoid naming clashes.