---
title: "LESS"
description: "LESS is a CSS preprocessor that adds variables, nesting and functions to stylesheets. Learn how LESS works and how it compares with the Sass preprocessor."
url: "https://nodea.io/en/glossary/less"
lang: "en"
updated: "2026-07-13"
---

# LESS

> LESS is a CSS preprocessor that extends the stylesheet language with variables, nested rules, functions and mixins, then compiles them down to plain CSS that browsers understand.

**LESS** (Leaner Style Sheets) is a [CSS](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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.

### What is the difference between LESS and Sass/SCSS?

Both are CSS preprocessors with similar capabilities — variables, nesting, mixins. The main differences are syntax and environment: LESS runs in JavaScript (Node.js) and prefixes variables with @. Sass/SCSS is compiled in Dart or Ruby, marks variables with $ and offers slightly richer logic. Today SCSS enjoys wider adoption.

## Related

- [CSS (Cascading Style Sheets)](https://nodea.io/en/glossary/css)
- [SCSS](https://nodea.io/en/glossary/scss)
- [Frontend](https://nodea.io/en/glossary/frontend)
- [Bootstrap](https://nodea.io/en/glossary/bootstrap)
- [Compilation](https://nodea.io/en/glossary/compilation)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/less.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)