Less (język arkuszy stylów)

Less (Leaner CSS^[4]) – dynamiczny język arkuszy stylów stworzony przez Alexis Selliera. Został stworzony w odpowiedzi na język Sass oraz dał początek nowszej wersji Sass – SCSS, która zapożyczyła część jego składni^[5][6]. Less było początkowo oprogramowaniem open source opartym na licencji MIT, którą zmieniono później na Apache License 2.0^[7]. Pierwsza implementacja napisana była w Ruby, późnej została ona zastąpiona wersją napisaną w JavaScripcie^[8]. Less jest zagnieżdżonym metajęzykiem – poprawny kod CSS jest również poprawnym kodem Less. Główną różnicą pomiędzy Less i innymi prekompilatorami CSS jest możliwość kompilacji w czasie rzeczywistym kodu przez przeglądarkę^[9][10]. Less może działać zarówno po stronie klienta, jak i serwera, jak również jego kod może być skompilowany wcześniej do czystego CSS.

Ten artykuł dotyczy języka arkuszy stylów. Zobacz też: inne znaczenia słowa „less”.

Less

Logo języka
Pojawienie się	3 maja 2009; około 16 lat temu[1]
Typowanie	dynamiczne
Implementacje	Less.js (oficjalna), Less4j,.less, lessphp, less.php, Python LESS Compiler[2]
Pochodne	SCSS
Aktualna wersja stabilna	4.4.0 (16 lipca 2025) [±]
Twórca	Alexis Sellier
Licencja	Apache License 2.0[3]
Platforma sprzętowa	wieloplatformowy
Platforma systemowa	wieloplatformowy
Strona internetowa

Elementy języka Less

Komentarze

Oprócz możliwości wstawiania standardowych komentarzy CSS – czyli wstawionych pomiędzy /* a */ – Less daje możliwość używania także własnych komentarzy. Komentarze te zaczynają się od podwójnego slasha (//) i kończą się wraz z linijką, na której się zaczęły. Komentarze takie nie pojawiają się w przetworzonych plikach CSS.

/* Standardowy komentarz blokowy CSS. */
// To jest komentarz liniowy Less. Nie pojawia się on w wynikowym pliku CSS.

Importowanie plików

Importowanie plików jest możliwe poprzez dyrektywę @import. Po niej należy podać ścieżkę względną do pliku w cudzysłowie. Jeżeli importowany plik ma rozszerzenie .css, dyrektywa nie daje efektu – linijka z importem jest pozostawiana i działa jako zwykły import w wynikowym arkuszu stylów. Plik z każdym innym rozszerzeniem (a także bez rozszerzenia – automatycznie dodawane jest wtedy rozszerzenie .less) traktowany jest jako plik Less i jest on przetwarzany oraz wklejany do pliku.

Przykłady

@import "plik";      // importowany jest "plik.less"
@import "plik.less"; // importowany jest "plik.less"
@import "plik.php";  // importowany jest "plik.php" i przetwarzany jako plik Less
@import "plik.css";  // linijka pozostawiona bez zmian

Opcje

Można zmienić zachowanie dyrektywy @import poprzez następujące opcje:

• reference – umożliwia odwoływanie się do zawartości importowanego pliku (np. mixins), ale go nie wstawia do wynikowego arkusza stylów
• inline – wymusza wstawienie importowego pliku bez przetwarzania
• less – traktuje plik jako plik Less, niezależnie od rozszerzenia
• css – traktuje plik jako plik CSS, niezależnie od rozszerzenia
• once – zduplikowane dyrektywy @import są ignorowane (domyślne zachowanie)
• multiple – pozwala wielokrotnie zaimportować ten sam plik

Składnia dyrektywy @import z opcją:

@import (opcja) "plik.less";

Zmienne

Zmienne definiowane są za pomocą znaku małpy (@), po której następuje nazwa zmiennej zakończona dwukropkiem oraz ustalaną wartością.

Przykład

@color: #cdeffe;
@background: lightblue;

a {
  color: @color;
}
div {
  background-color: @background;
}

Powyższy kod w języku Less zostanie przetworzony do następującego kodu CSS:

a {
  color: #cdeffe;
}
div {
  background-color: #add8e6;
}

Zagnieżdżanie

Less pozwala zagnieżdżać reguły CSS.

Przykład

a {
  color: #000;
  &:hover { // & oznacza rodzica - w tym przypadku: a
    color: #00f;
  }
  img {
    background-color: red;
  }
}

Powyższy kod przetworzony zostanie do następującego kodu CSS:

a {
  color: #000;
}
a:hover {
  color: #00f;
}
a img {
  background-color: red;
}

Mixins

Mixins mogą być utożsamiane z funkcjami, których wywołanie powoduje wstawienie pewnego bloku kodu w miejsce wywołania. Składnia mixins wygląda identycznie jak definicja klasy lub selektora dla ID w CSS, a wywołanie to po prostu nazwa mixin, zakończona opcjonalnie pustym nawiasem okrągłym.

Przykład

.a, #b {
  color: red;
}
h1 {
  .a();
}
h2 {
  #b;
}

Po przetworzeniu do CSS, powyższy kod wyglądał będzie tak:

.a,
#b {
  color: red;
}
h1 {
  color: red;
}
h2 {
  color: red;
}

Argumenty

Mixins pozwalają na przekazywanie argumentów. Deklaracja mixin zmienia się wtedy – po nazwie pojawia się nawias z deklaracją zmiennej lub zmiennych oddzielonych średnikami (lub przecinkami, choć jest to niezalecane^[11]). Nawias może być pusty – mixin nie przyjmuje wtedy żadnych argumentów, ale nie pojawia się wtedy w wynikowym kodzie CSS jako klasa lub ID.

Przykład

.size(@width; @height: 100px) {
  width: @width;
  height: @height;
}
.color() {
  color: red;
}
img {
  .size(50px);
  .color;
}

Wynikowy CSS:

img {
  width: 50px;
  height: 100px;
  color: red;
}

Zwracana wartość

W języku Less nie ma instrukcji return. Mixin może jednak zwracać wartość poprzez ustawienie jej zmiennej.

Przykład

.sum(@a, @b) {
  @c: @a + @b;
}

a {
  .sum(5px, 10px);
  width: @c;
}

Wynikowy CSS:

a {
  width: 15px;
}

Funkcje

Less zapewnia całą gamę wbudowanych funkcji – operujących na listach, kolorach, ciągach znaków, typach, czy matematycznych. Pełna lista znajduje się w oficjalnej dokumentacji. Wywołanie funkcji wygląda podobnie jak wywołanie mixins – nazwy funkcji pozbawione są jednak kropki lub hasha (#) na początku nazwy.

Operatory arytmetyczne

Less obsługuje podstawowe operatory arytmetyczne: +, -, * i /.

Przykład

@color: #888;
@width: 10px;

div {
  border-top-color: @color + #111;
  border-right-color: @color - 100;
  border-bottom-color: @color * 2;
  border-left-color: @color / 2.5;
  border-width: @width / 5;
}

Wynikowy kod CSS:

div {
  border-top-color: #999999;
  border-right-color: #242424;
  border-bottom-color: #ffffff;
  border-left-color: #363636;
  border-width: 2px;
}

Mixin Guards i operatory logiczne

Język Less nie posiada konstrukcji if..else znanej z większości języków funkcyjnych. Zamiast tego, posiada mixin guards – pozwala na stworzenie kilku funkcji o tej samej nazwie, a o tym, która zostanie wywołana, decyduje wartość przekazywanego parametru.

Użycie mixin guard wygląda następująco: po deklaracji mixin pojawia się słowo kluczowe when, po którym znajduje się warunek logiczny w nawiasach okrągłych.

Przykład

.background(@color) when (lightness(@color) >= 50%) {
  background-color: white;
}
.background(@color) when (lightness(@color) < 50%) {
  background-color: black;
}
.a {
  .background(#d2e9a0);
}
.b {
  .background(#c22);
}

Po skompilowaniu powyższy przykład w języku Less da następujący kod CSS:

.a {
  background-color: white;
}
.b {
  background-color: black;
}

Pętle

Less nie umożliwia na tworzenie pętli for, while, czy innych znanych z większości języków programowania. Za pomocą mixin guards oraz rekurencji można jednak tworzyć konstrukcje zbliżone do standardowych pętli.

Przykład

.generate-grays(25);

.generate-grays(@n) when (@n < 100) {
  .gray-@{n} {
    color: #fff * (@n / 100);
  }
  .generate-grays(@n + 25);
}

Po przetworzeniu do CSS:

.gray-25 {
  color: #404040;
}
.gray-50 {
  color: #808080;
}
.gray-75 {
  color: #bfbfbf;
}

Frameworki używające Less

• Bootstrap^[12]
• Semantic UI^[13]
• Roots Wordpress Starter Theme