LESS

LESS (Leaner Style Sheets) is a CSS preprocessor — a layer on top of the stylesheet language that extends it with capabilities borrowed from programming languages, then compiles the code down to plain CSS that browsers understand. It appeared in 2009 and was for years one of the most popular tools of its kind, used among other things in earlier versions of the Bootstrap framework.

How LESS works

LESS code is written in files with the .less extension, and a dedicated compiler turns it into a final CSS stylesheet. The preprocessor eliminates repetition and makes large sets of styles easier to maintain through mechanisms such as:

• variables — defining a colour or size once and reusing it in many places (e.g. @primary-color);
• nesting — writing rules in a structure that mirrors the HTML hierarchy;
• mixins — reusable blocks of properties passed around like functions;
• operations and functions — calculations on values and manipulation of colours.

Because the browser understands only pure CSS, the compilation step is mandatory — it is performed locally with build tools or in the deployment pipeline.

Practical application

LESS is used to organize styles in larger projects — thanks to variables and mixins it is easy to maintain a consistent system of colours, spacing and typography and to make global changes quickly. Although still found in older codebases, new projects more often choose SCSS (Sass), and native CSS has taken over part of the preprocessors' role (variables, nesting). Knowledge of LESS remains useful especially when maintaining existing sites and themes built on this technology.