Less (język arkuszy stylów)

Less
	; Logo języka
Pojawienie się	3 maja 2009; ponad 14 lat temu
Typowanie	dynamiczne
Implementacje	Less.js (oficjalna), Less4j,.less, lessphp, less.php, Python LESS Compiler
Pochodne	SCSS
Aktualna wersja stabilna	4.2.0; (7 września 2023) [±]
Twórca	Alexis Sellier
Licencja	Apache License 2.0
Platforma sprzętowa	wieloplatformowy
Platforma systemowa	wieloplatformowy
	Strona internetowa

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.

Elementy języka Less[edytuj | edytuj kod]

Komentarze[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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ść[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

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[edytuj | edytuj kod]

Przypisy[edytuj | edytuj kod]

↑ Commit „init” – less.ruby. [dostęp 2014-07-08]. (ang.).
↑ Ports of Less.js. [dostęp 2014-07-08]. (ang.).
↑ Tekst licencji. [dostęp 2014-07-07]. (ang.).
↑ Wyjaśnienie nazwy LESS – README.md – less.ruby. [dostęp 2014-07-08]. (ang.).
↑ Sass and Less. [dostęp 2014-07-08]. [zarchiwizowane z tego adresu (2009-06-21)]. (ang.).
↑ Sass vs. SCSS: which syntax is better? – The Sass Way. [dostęp 2014-07-08]. (ang.).
↑ Commit „moved to apache license” – Less.js. [dostęp 2014-07-08]. (ang.).
↑ README.md – less.ruby. [dostęp 2014-07-08]. (ang.).
↑ Is there a SASS.js? Something like LESS.js? – Stack Overflow. [dostęp 2014-07-08]. (ang.).
↑ Oficjalna strona Less.js. [dostęp 2014-07-08]. (ang.).
↑ Mixins With Multiple Parameters – Language Features – Less.js. [dostęp 2014-07-08]. (ang.).
↑ Preprocessors – Bootstrap. [dostęp 2014-07-08]. (ang.).
↑ Kod źródłowy Semantic UI w serwisie GitHub. [dostęp 2014-07-08]. (ang.).

Bibliografia[edytuj | edytuj kod]

Language features – Less.js. [dostęp 2014-07-08]. (ang.).
Bass Jobsen, Faiz J Fattohi: Less Web Development Essentials: use CSS preprocessing to streamline the development and maintenance of your web applications. Packt Publishing, kwiecień 2014. ISBN 978-1-78398-146-5. OCLC 880454822. (ang.).

Linki zewnętrzne[edytuj | edytuj kod]

LESS2CSS – kompilator Less działający w przeglądarce internetowej

[1] Commit „init” – less.ruby. [dostęp 2014-07-08]. (ang.).

[2] Ports of Less.js. [dostęp 2014-07-08]. (ang.).

[3] Tekst licencji. [dostęp 2014-07-07]. (ang.).

[4] Wyjaśnienie nazwy LESS – README.md – less.ruby. [dostęp 2014-07-08]. (ang.).

[5] Sass and Less. [dostęp 2014-07-08]. [zarchiwizowane z tego adresu (2009-06-21)]. (ang.).

[6] Sass vs. SCSS: which syntax is better? – The Sass Way. [dostęp 2014-07-08]. (ang.).

[7] Commit „moved to apache license” – Less.js. [dostęp 2014-07-08]. (ang.).

[8] README.md – less.ruby. [dostęp 2014-07-08]. (ang.).

[9] Is there a SASS.js? Something like LESS.js? – Stack Overflow. [dostęp 2014-07-08]. (ang.).

[10] Oficjalna strona Less.js. [dostęp 2014-07-08]. (ang.).

[11] Mixins With Multiple Parameters – Language Features – Less.js. [dostęp 2014-07-08]. (ang.).

[12] Preprocessors – Bootstrap. [dostęp 2014-07-08]. (ang.).

[13] Kod źródłowy Semantic UI w serwisie GitHub. [dostęp 2014-07-08]. (ang.).

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]