Less (Leaner CSS) – 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. Less było początkowo oprogramowaniem open source opartym na licencji MIT, którą zmieniono później na Apache License 2.0. Pierwsza implementacja napisana była w Ruby, późnej została ona zastąpiona wersją napisaną w JavaScripcie. 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ę. 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 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). 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; }
i operatory logiczne Język Less nie posiada konstrukcji if..else znanej z większości języków funkcyjnych. Zamiast tego, posiada – pozwala na stworzenie kilku funkcji o tej samej nazwie, a o tym, która zostanie wywołana, decyduje wartość przekazywanego parametru.
Użycie 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ą 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 Semantic UI Roots Wordpress Starter Theme
Przypisy
Bibliografia
Linki zewnętrzne LESS2CSS – kompilator Less działający w przeglądarce internetowej
Kategoria:Języki arkuszy stylów Kategoria:Biblioteki JavaScript Kategoria:Oprogramowanie na licencji Apache License