Less (preprocesor CSS)

Less (skrót od Leaner Style Sheets) jest preprocesorem języka CSS, który rozszerza możliwości standardowego arkusza stylów o zmienne, operacje matematyczne, zagnieżdżanie reguł, mixiny oraz funkcje. Dzięki temu projektanci i programiści mogą pisać bardziej zwięzły, czytelny i łatwiejszy w utrzymaniu kod stylów.

Historia

Projekt Less został stworzony w 2009 roku przez Lea Verou oraz Alexis Sellier. Pierwsza wersja less.js była implementacją w języku JavaScript, umożliwiającą kompilację plików .less bezpośrednio w przeglądarce. Wkrótce pojawiła się wersja serwerowa napisana w Node.js, co znacznie przyspieszyło proces budowania projektów.

Podstawowe funkcje

Zmienne – umożliwiają definiowanie stałych wartości, np. kolorów czy rozmiarów, które można wykorzystywać w całym arkuszu:
```
@primary-color: #3498db;
h1 { color: @primary-color; }
```
Zagnieżdżanie – przypomina strukturę drzewa DOM, co pozwala na czytelniejsze grupowanie reguł:
```
nav {
    ul { margin: 0; }
    li { display: inline-block; }
}
```

Mixiny – podobne do funkcji, pozwalają na wielokrotne wstawianie fragmentów kodu:

.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box { .rounded(5px); }

Operacje matematyczne – wspierają dodawanie, odejmowanie, mnożenie i dzielenie wartości liczbowych i jednostek:
```
@width: 1000px;
@half-width: @width / 2;   // 500px
```
Funkcje wbudowane – m.in. darken(), lighten(), percentage() i wiele innych, które umożliwiają manipulację kolorami i jednostkami.
Importowanie plików – pozwala dzielić kod na mniejsze moduły:
```
@import "reset.less";
@import "typography.less";
```

Proces kompilacji

Kod napisany w Less musi zostać przekształcony (skompilowany) do czystego CSS. Istnieją trzy główne sposoby:

Kompilacja po stronie serwera – przy pomocy narzędzi Node.js (np. lessc), Grunt, Gulp czy Webpack.
Kompilacja po stronie klienta – przy użyciu less.js w przeglądarce (głównie w fazie prototypowania).
Wtyczki do edytorów – wiele IDE i edytorów (np. VS Code, WebStorm) oferuje wbudowaną kompilację przy zapisie pliku.

Integracja z narzędziami i frameworkami

Less jest szeroko wspierany przez popularne systemy budowania i frameworki front‑endowe:

Bootstrap 3 – pierwotnie oparty na Less, co umożliwiało łatwą modyfikację motywu.
AngularJS – w niektórych projektach wykorzystywano Less do stylizacji komponentów.
Laravel – posiada wbudowaną obsługę Less poprzez laravel-mix.

Porównanie z innymi preprocesorami

W świecie front‑endu istnieją także inne preprocesory, takie jak Sass (SCSS) i Stylus. Główne różnice to:

Cecha	Less	Sass (SCSS)	Stylus
Składnia zmiennych	`@color: #fff;`	`$color: #fff;`	`color = #fff`
Zagnieżdżanie	Tak, podobnie jak w CSS	Tak	Tak
Mixiny	Wymagają definicji punktu wywołania	Wsparcie funkcji i mixinów	Możliwość definiowania funkcji w dowolny sposób
Kompatybilność językowa	JavaScript (Node.js)	Ruby (oryginalnie), później Dart i C	JavaScript (Node.js)

Zalety i wady

Zalety

Prosta nauka – składnia jest bliska czystemu CSS.
Szybka integracja z istniejącymi projektami.
Rozbudowany ekosystem wtyczek (npm).
Dobre wsparcie w edytorach i narzędziach budujących.

Wady

Mniej funkcji niż Sass (np. brak wbudowanego systemu map).
Historia rozwoju jest wolniejsza – społeczność przeszła częściowo na Sass.
Komplikacje przy długich łańcuchach importów, co może wydłużać kompilację.

Przykładowy plik Less

// zmienne
@base-font: 14px;
@primary: #3498db;

// mixin
.border-radius(@r) {
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
  border-radius: @r;
}

// użycie
body {
  font-size: @base-font;
  color: darken(@primary, 10%);
  .border-radius(4px);
}

Rozwój i aktualny stan

Od wersji 3.0 (wydanej w 2015 roku) Less stale otrzymuje aktualizacje, które wprowadzają obsługę nowych funkcji CSS, poprawek bezpieczeństwa oraz ulepszeń wydajności. Najnowsza wersja (stan na 2026 r.) to 4.x, dostępna jako pakiet less w npm.

Powiązane pojęcia

Warto zapoznać się także z następującymi artykułami:

Artykuł opracowany w oparciu o informacje dostępne do roku 2026. Źródła: dokumentacja Less, materiały edukacyjne tworzenia stron internetowych oraz publikacje techniczne.