Funkcje w LESS

W tej lekcji przyjrzymy się, jak używać funkcji. Funkcje są w pewnym stopniu podobne do domieszek, ale pozwalają na dodawanie parametrów, które mogą zmieniać swoje wartości.

Parametry te są przekazywane w okrągłych nawiasach funkcji. Spójrzmy na przykład.

Stwórzmy funkcję fs, która będzie ustawiać rozmiar czcionki. Niech rozmiar będzie przekazywany parametrem. Jako parametr będzie działać zmienna, której nazwę wymyślamy przy deklarowaniu funkcji:

styles.less.fs(@size) {
  // tutaj będzie kod funkcji
}

Wskażmy wewnątrz funkcji, gdzie ma zostać wstawiona wartość naszego parametru:

styles.less.fs(@size) {
  font-size: @size;
}

Wywołajmy naszą funkcję, przekazując jej jako parametr żądany rozmiar elementu:

styles.lessp {
  .fs(20px);
}

W wyniku po kompilacji rozmiar czcionki akapitu stanie się równy podanej wartości:

styles.cssp {
  font-size: 20px;
}