
Witam w kolejnym artykule z pogranicza JavaScript i CSS. Dziś krótko o narzędziu Less CSS (tudzież CSS/LESS) – bibliotece stworzonej w JavaScript, mogącej pomóc programiście przy pracy ze stylami CSS.
LESS CSS
Biblioteka ta wprowadza swego rodzaju dynamiczny język arkuszy stylów. LESS rozszerza CSS o elementy dynamicznych języków, takie jak zmienne, funkcje a nawet domieszki (mixins).
Generalnie chodzi o to, aby podobnie jak w językach programowania pisać mniej kodu, a w to miejsce używać takich właśnie elementów jak zmienne i funkcje.
Użycie po stronie klienta
Można wykonać wcześniejszą kompilację (i jest to zalecane w środowisku produkcyjnym). Na potrzeby testów wystarczy interpretacja kodu w przeglądarce.
Nasz kod bazujący na składni LESS umieszczamy w pliku o rozszerzeniu .less, następnie dołączamy go jak zwykły arkusz CSS, z tym że podajemy typ „stylesheet/less” w parametrze rel. Plik(i) .less należy dołączać przed biblioteką (less.js).
Przykład:
<head> <link rel="stylesheet/less" type="text/css" href="tests.less"> <script src="less.js" type="text/javascript"></script> </head>
Najprostszy przykład LESS CSS w akcji to zdefiniowanie zmiennej koloru w naszym pliku .less, jak poniżej:
@my_color: #ed0000; h2 { color: @my_color; } .myClass { width: 100px; color: @my_color; }
Kolor zdefiniowany raz jako nazwana zmienna może być później używany wielokrotnie w kodzie. Zmienną identyfikuje znak @ (przypomina to znak dolara dla zmiennych w PHP).
Domieszki (mixins)
Ciekawym elementem LESS CSS są tzw. domieszki. Jest to sposób na uzyskanie czegoś w rodzaju dziedziczenia. Możliwe jest dzięki temu zawarcie właściwości jednej klasy (CSS) w innej klasie. Takie zachowanie jest podobne do użycia zmiennych, ale dotyczy całych klas.
Ponadto domieszki mogą pobierać argumenty, co podobne jest w działaniu do funkcji.
Przykład – domieszki:
/* LESS */ .rounded-corners (@radius: 6px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #elem1 { .rounded-corners; } #container { .rounded-corners(12px); }
W .rounded-corners został zdefiniowany argument radius z wartością domyślną (6px). Wartość tego argumentu zostanie podstawiona do zmiennych (promień obramowania elementu CSS). W przypadku elementu mającego ID = container, parametr w momencie wywołania domieszki zostanie nadpisany (12px).
Zagnieżdżone reguły (nested rules)
Mówiąc o dziedziczeniu wypada wspomnieć o regułach zagnieżdżonych. Pozwalają one zagnieżdżać jedne selektory wewnątrz innych, dzięki czemu otrzymujemy bardziej przejrzyste dziedziczenie, krótsze nazwy, brak powielania reguł CSS a tym samym mniejsze arkusze stylów.
Przykład:
/* LESS */ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
Wynik takiej definicji będzie równoważny z następującym kodem CSS:
/* Skompilowany CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
Funkcje w LESS CSS
Narzędzie udostępnia programiście także możliwość korzystania z funkcji i operacji. Operacje pozwalają na dodawanie, odejmowanie, dzielenie i mnożenie wartości właściwości oraz kolorów, dając możliwość tworzenia złożonych zależności między właściwościami.
W celach zgodności, operacje powinny wykonywane wewnątrz nawiasów.
Przykład:
/* LESS */ @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }
Taki zestaw funkcjonalności udostępnianych przez LESS CSS pozwala kreować coraz bardziej skomplikowane twory na podobieństwo programów. Oczywiście zawsze do pewnego stopnia.
Może to być w każdym razie docenione przez programistów obeznanych z językami programowania typu PHP, JavaScript, itp, pracujących z CSS raczej „dorywczo” (w porównaniu do Frontend Developerów). Taki sposób definiowania stylów CSS może okazać się dla nich bardziej naturalny.
A to najważniejsze, aby sięgać po rozwiązania z którymi pracuje nam się dobrze i które oszczędzają nasz cenny czas.
Podsumowanie
Na koniec zasoby dla dociekliwych:
– strona WWW projektu:
– Emerald – responsive grid system written in LESS:
http://lmc-eu.github.io/emerald/
– LESS – Tips and Tricks:
– więcej przykładów użycia LESS CSS:
http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/
LESS CSS to nie jedyny pre-procesor tego typu, jednak zyskuje na popularności. Coraz częściej można się z nim spotkać w projektach (zwłaszcza w tych nowszych) jak i w ofertach pracy dla programistów związanych z Frontend-em. Z pewnością warto poświęcić kilka chwil na jego opanowanie.