Less (język arkuszy stylów)

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj
Ten artykuł dotyczy języka arkuszy stylów. Zobacz też: inne znaczenia słowa „less”.
Less
Logo języka
Logo języka
Pojawienie się 3 maja 2009; 8 lat temu[1]
Typowanie dynamiczne
Implementacje Less.js (oficjalna), Less4j, .less, lessphp, less.php, Python LESS Compiler[2]
Pochodne SCSS
Aktualna wersja stabilna 1.7.3 / 22 czerwca 2014; 2 lata temu[3]
Twórca Alexis Sellier
Licencja Apache License 2.0[4]
Platforma sprzętowa wieloplatformowy
Platforma systemowa wieloplatformowy
http://lesscss.org

Less (Leaner CSS[5]) to 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[6][7]. Less było początkowo oprogramowaniem open source opartym na licencji MIT, którą zmieniono później na Apache License 2.0[8]. Pierwsza implementacja napisana była w Ruby, późnej została ona zastąpiona wersją napisaną w JavaScripcie[9]. 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ę[10][11]. 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]

Komentarze[edytuj]

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]

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]

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]

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]

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]

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]

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[12]). 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]

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]

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]

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]

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]

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]

Przypisy

  1. Commit "init" - less.ruby (ang.). [dostęp 2014-07-08].
  2. Ports of Less.js (ang.). [dostęp 2014-07-08].
  3. Changelog - Less.js (ang.). [dostęp 2014-07-08].
  4. Tekst licencji (ang.). [dostęp 2014-07-07].
  5. Wyjaśnienie nazwy LESS - README.md - less.ruby (ang.). [dostęp 2014-07-08].
  6. Sass and Less (ang.). [dostęp 2014-07-08].
  7. Sass vs. SCSS: which syntax is better? - The Sass Way (ang.). [dostęp 2014-07-08].
  8. Commit "moved to apache license" - Less.js (ang.). [dostęp 2014-07-08].
  9. README.md - less.ruby (ang.). [dostęp 2014-07-08].
  10. Is there a SASS.js? Something like LESS.js? - Stack Overflow (ang.). [dostęp 2014-07-08].
  11. Oficjalna strona Less.js (ang.). [dostęp 2014-07-08].
  12. Mixins With Multiple Parameters - Language Features - Less.js (ang.). [dostęp 2014-07-08].
  13. Preprocessors - Bootstrap (ang.). [dostęp 2014-07-08].
  14. Kod źródłowy Semantic UI w serwisie GitHub (ang.). [dostęp 2014-07-08].

Bibliografia[edytuj]

Linki zewnętrzne[edytuj]