LESS

LESS (ang. Leaner Style Sheets) to preprocesor CSS — nakładka na język arkuszy stylów, która rozszerza go o możliwości znane z języków programowania, a następnie kompiluje kod do zwykłego CSS zrozumiałego dla przeglądarek. Powstał w 2009 roku i przez lata był jednym z najpopularniejszych narzędzi tego typu, wykorzystywanym m.in. we wcześniejszych wersjach frameworka Bootstrap.

Jak działa LESS?

Kod LESS pisze się w plikach o rozszerzeniu .less, a specjalny kompilator zamienia go na finalny arkusz CSS. Preprocesor eliminuje powtarzalność i ułatwia utrzymanie dużych zestawów stylów dzięki takim mechanizmom jak:

• zmienne — jednokrotne zdefiniowanie koloru czy rozmiaru i użycie go w wielu miejscach (np. @primary-color);
• zagnieżdżanie — zapisywanie reguł w strukturze odwzorowującej hierarchię HTML;
• mixiny — wielokrotnie używane bloki właściwości przekazywane niczym funkcje;
• operacje i funkcje — obliczenia na wartościach oraz manipulacja kolorami.

Ponieważ przeglądarka rozumie wyłącznie czysty CSS, etap kompilacji jest obowiązkowy — realizuje się go lokalnie narzędziami budującymi lub w potoku wdrożeniowym.

Zastosowanie w praktyce

LESS stosuje się do organizowania stylów w większych projektach — dzięki zmiennym i mixinom łatwo utrzymać spójny system kolorów, odstępów i typografii oraz szybko wprowadzać zmiany globalne. Choć wciąż spotykany w starszych bazach kodu, w nowych projektach częściej wybiera się dziś SCSS (Sass), a natywny CSS przejął część funkcji preprocesorów (zmienne, zagnieżdżanie). Znajomość LESS pozostaje przydatna zwłaszcza przy utrzymaniu istniejących serwisów i motywów opartych na tej technologii.

Z perspektywy wdrożeniowej warto pamiętać, że pliki .less nigdy nie trafiają bezpośrednio do przeglądarki — na serwer produkcyjny wysyła się już skompilowany, zminifikowany arkusz CSS. Kompilację włącza się w proces budowania aplikacji za pomocą narzędzi takich jak Webpack, Vite czy Gulp, dzięki czemu każda zmiana w kodzie źródłowym automatycznie generuje aktualny plik wynikowy. Takie podejście przyspiesza ładowanie strony i porządkuje utrzymanie stylów, oddzielając wygodny do edycji kod źródłowy od zoptymalizowanej wersji serwowanej użytkownikom.