28 grudnia, 2013 
Dominik-W 
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.
Opublikowano w 
Tags: 
