Less (język arkuszy stylów)

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 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

@import (opcja) "plik.less";

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;
}

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 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;
}

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

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

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

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

a {
  width: 15px;
}

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.

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;
}

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;
}

.generate-grays(25);

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

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