Korzystanie z CSS, czyli kaskadowych arkuszy stylu do formatowania stylistycznego stron internetowych jest dziś wykorzystywane przez niemal wszystkich webmasterów na świecie. Za pomocą CSS i HTML5  można tworzyć animacje i grafikę, którą jeszcze jakiś czas temu przygotować można było tylko we Flashu. Jedynym problemem CSS, który szczególnie daje się we znaki przy tworzeniu dużych projektów jest jego statyczny charakter, a więc brak zmiennych czy operacji. Gdy arkusz staje się coraz bardziej rozbudowany, często wymaga powtórek tych samych elementów kodu, przez co przestaje być prosty i czytelny.  Ponadto utrudnione jest dokonywanie szybkich zmian np. w obrębie kolorystyki designu i tym podobnych. Jak rozwiązać te problemy? Wykorzystać można rozszerzenie LESS.

Czym jest LESS?

LESS pozwala rozszerzyć elementy CSS o wspomniane powyżej elementy dynamicznych języków programistycznych, a więc: zmienne, domieszki, operacje, a także funkcje, dając webmasterom o wiele szersze możliwości pisania i upraszczając tworzenie kodu. LESS działa zarówno po stronie przeglądarek, jak i po stronie serwera – w środowiskach takich, jak Rhino, czy Node.js. Podczas ładowania strony, kod LESS zostaje przekompilowany na zwykły CSS zrozumiały dla przeglądarek.

Instalacja LESS

LESS to nie tylko język tworzenia arkuszy stylów. By w pełni korzystać z jego możliwości, należy dysponować również kompilatorem, który uruchamiać się będzie przy ładowaniu strony i przekształcał kod LESS na CSS. W sieci znaleźć można kompilatory dla wielu popularnych języków programistycznych  wykorzystywanych w środowisku internetowym – m.in. dla Ruby, Javascript, czy PHP. Instalacja jest bardzo prosta – są to dwie linijki kodu, w której pierwsza stanowi deklarację pliku .less, a druga to kompilator. Składnia różni się w niewielkim stopniu od tej stosowanej w CSS – w atrybucie rel umieszczamy stylesheet/less, a rozszerzenie pliku to .less.

Najważniejsze elementy składni LESS

Jak już wspomnieliśmy, najważniejszą zaletą LESS jest obecność elementów dynamicznych języków kodowania, które znacznie ułatwiają pracę na dużych i skomplikowanych arkuszach. Najistotniejsze to:

- zmienne – umożliwiają dokonywanie globalnych (a także lokalnych) zmian w arkuszu stylu – na przykład szybkiej zmiany kolorystyki witryny. Ich wartość jest definiowana w jednym miejscu, co znacznie ułatwia wszelkie modyfikacje,

- domieszki (mixins) – działają podobnie do zmiennych, jednak odnoszą się do całych klas; mogą się także zachowywać jak funkcje, czyli pobierać argumenty,

- zagnieżdżenia – możliwość zagnieżdżania reguł wewnętrznych oraz jednoczesnego tworzenia hierarchii pozwala łatwiej zarządzać kodem i sprawia, że staje się on bardziej transparentny i nie wymaga tak wielu selektorów,

- funkcje i operacje – dają możliwość tworzenia złożonych zależności między właściwościami elementów poprzez mnożenie, dzielenie, dodawanie i odejmowanie wartości właściwości oraz kolorów.

LESS jest rozwiązaniem, które pozwala usprawnić pisanie kodu CSS i wyeliminować jego nadmiarowość. Dzięki niemu, kod staje się prosty i przejrzysty.