LESS: szczuplejsze arkusze CSS

Każdy z szanujących się webmasterów zapewne zna bardzo dobrze skrót CSS. Tak to Kaskadowe arkusze stylów (ang. Cascading Style Sheets), prosty w obsłudze język pozwalający nam formatować dowolny znacznik w naszym dokumencie HTML. Ameryki nie odkryłem prawda :)? Wraz z rozwojem CSS3 dostajemy kolejne właściwości mające nam ułatwić życie, takie jak zaokrąglanie rogów, podwójne tła, obrazkowe obramowanie czy choćby takie dobrodziejstwo jak transitions. Patrząc na to wszystko z uśmiechem na twarzy stwierdzamy, że nic nam więcej do szczęścia nie potrzeba. A co gdyby można było jednak coś jeszcze ulepszyć, choćby sam proces tworzenia arkuszy?

Dopóki nasz kod jest w miarę prosty, nie przeszkadza nam samo jego pisanie, ale co w przypadku, gdy nasz arkusz staje się coraz bardziej rozbudowany, a kolejne linijki przybywają ze zdwojoną szybkością? Te same elementy zaczynają powtarzać się w różnych miejscach, doprowadzając do nadmiarowości kodu, sam arkusz przestaje być już taki prosty i czytelny a zasada DRY niema tutaj żadnego przełożenia. To wszystko wynika z faktu iż język CSS, pomimo swojej prostoty, jest bardzo ograniczony w swojej technologi. Brakuje tu takich podstawowych rzeczy, jak zmienne lub operacje. Czy musimy akceptować taki stan? I tu z pomocą przychodzi nam bohater dzisiejszego artykułu, Less.

Głównym zadaniem Less jest rozszerzenie możliwości CSS o takie elementy jak m.in. wspomniana już możliwość definiowania zmiennych, łatwe zagnieżdżanie selektorów czy proste operacje. Wszystko to zostaje później podczas ładowania strony przekompilowane na zwykły kod CSS tak by był on zrozumiały dla przeglądarek. Prawda że proste? Skoro wiesz już to i owo, czas wziąć się do pracy.

Instalacja

By zacząć musisz zrozumieć elementy na jakie dzieli się Less. Pierwszy z nich to język czyli to co piszesz w nowym dokumencie (zmienne, selektory, właściwości, itd.). To jednak nie wystarczy do pełnego korzystania z możliwości jakie niesie nam to narzędzie. Potrzebny nam jeszcze kompilator który uruchamiany będzie wraz z ładowaniem strony. Jego głównym zadaniem jest zamiana kodu LESS na kod CSS. W internecie można znaleźć wiele wersji tego narzędzie dla takich języków jak m.in PHP, Ruby czy JavaScript. My skorzystamy z wersji JavaScript (Less.js).

Proces instalacji jest niezwykle prosty co przedstawia poniższy kod:

<link rel="stylesheet/less" href="main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

W pierwszej linijce dołączamy napisany przez nas dokument less. Zwróć uwagę na składnie, która różni się nieco od tej stosowanej przy dołączaniu arkuszy CSS. Pierwsza z nich to atrybut rel, w którym umieszczamy stylesheet/less po to by kompilator wiedział że tu znajduje się plik który trzeba odczytać. Drugi element to plik jaki dołączamy, który posiada rozszerzenie .less.
Druga linijka to, jak zapewne się domyślacie nasz kompilator. Ja poszedłem na skróty i dołączyłem go prosto z code.google.com, dzięki czemu nawet nie muszę go pobierać na dysk. Zanim zaczniemy testowanie, warto wspomnieć o dwóch istotnych sprawach. Plik .less musi być zadeklarowany przed kompilatorem. Druga sprawa tyczy się osób, które zamierzają bawić się Less na chromie. Uruchamiając nasz plik html przez file:// kompilator się nie uruchomi. Zalecam albo testować na firefoxie, albo jak ktoś ma to przez localhost.

Składnia

Zmienne

Zapewne nie raz miałeś sytuacje, w której jednego koloru używałeś dla wielu elementów. A to jakiś paragraf, tu jakiś nagłówek, link w stopce itd. Co jeśli postanowisz zmienić taki kolor na inny? No i tu zaczyna się mozolne przeszukiwanie arkusza. Sprytni zauważą, że przecież można wypisać listę elementów i im nadać kolor, np. tak:

#header, #side-left p, #side-right p{
     color: #000000;
}

No dobra, a co jeżeli będziemy ten sam kolor nadawać, coraz to większej liczbie elementów?

#header, #side-left p, #side-right p, #footer p, 
#side-left h1, #side-right h1, #side-left span.some-class{
     color: #000000;
}

Przestaje to już być takim dobrym rozwiązaniem. By temu zaradzić, możemy w jednym miejscu zdefiniować zmienną i przechować w niej wartość taką jak np. kolor którego chcemy używać. Dzięki takiemu zabiegowi, nasza wartość jest przechowywana w jednym miejscu, a jakakolwiek zmiana sprowadza się tylko do nadania naszej zmiennej nowej wartości. Prawda że proste? O to przykład:

@text-color: #000000;
#header{color: @text-color}
#side-right{color: @text-color}

Jak widać zadeklarowaliśmy sobie zmienną text-color. Każda zmienna zaczyna się od znaku @ po którym następuje jej nazwa. Po dwukropku wpisujemy wartość, jaką będziemy wykorzystywać później. Zmienne jak to bywa w innych językach, również i tu mają swój zasięg. Zastanówcie się jaki kolor będzie miał nagłówek h1?

@text-color: black;
h1{
     @text-color: red;
     color: @text-color;
}

W Less, co wynika z powyższego przykładu, mamy możliwość definiowania zmiennych lokalnych i globalnych. Po skompilowaniu tego kodu nagłówek będzie miał kolor czerwony.

Zagnieżdżanie

Jedną z najważniejszych możliwości Less jest właśnie zagnieżdżanie. Wyobraźmy sobie, że zdefiniowaliśmy nową nawigację. Tak wyglądały by przykładowe style:

#header{}
#header ul#nav{}
#header ul#nav li{}
#header ul#nav li a{}

W Less istnieje możliwość zagnieżdżania reguł wewnątrz innych, tworząc przy tym hierarchie. Poniżej prezentuje właściwy kod:

#header{
   ul#nav{
      li{
         a{

         }
      }
   }
}

Celowo nie umieściłem w nim żadnych właściwości by można było zobaczyć jak wygląda cała składnia. Dzięki temu nie powtarzamy już selektorów w kółko i łatwiej nam zarządzać kodem, gdyż od razu widać grupy elementów które są ze sobą powiązane. Innym sposobem na wykorzystanie zagnieżdżania w Less, są linki i nadawane im pseudoklasy takie jak :hover, :visited czy :acitve. Po zdefiniowaniu elementu nadrzędnego, w tym wypadku linku, w wewnątrz odwołujemy się do niego przez symbol &.

a {
  &:hover {}
  &:active {}
  &:visited {}
}
Po użyciu takiej składni, kod staje się bardziej czytelny i od razu widać jakie właściwości ma dany typ linku.

Ponowne wykorzystanie klas

Czasem zdarzają się takie przypadki, że w wielu miejscach wykorzystujemy te same właściwości. Dla przykładu weźmy ostatnimi czasy bardzo popularna własność border-radius. Niestety, do puki CSS3 nie jest w pełni obsługiwana przez wszystkie przeglądarki, należy używać go z dodatkowymi prefiksami:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;

Nie wiem jak Ciebie, ale mnie męczy przekopiowywanie tych linijek do każdego z elementów w którym chcę mieć zaokrąglone rogi. Skorzystajmy więc z Less by temu zaradzić:

.border-radius{
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
}

div#content{
   .border-radius;
}

Dzięki takiej składni element div#content dziedziczy z klasy .border-radiusTeraz wszystko zamiast kilkunastu linijek kodu mamy kilka. Mnie jednak nie do końca satysfakcjonuje takie rozwiązanie. Co jeżeli ja w innym elemencie chcę mieć 3px zamiast 5px? Można oczywiście zadeklarować nową kasę dla 3px, potem dla 6, 7, 8 … ale jest inny bardziej dynamiczny sposób. Możemy naszej klasie przekazywać dowolne wartości, jeżeli tylko odpowiednio przerobimy składnie:

.border-radius(@radius: 5){
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
   -o-border-radius: @radius;
   border-radius: @radius;
}

Mamy coś na wzór funkcji, z parametrem, któremu nadaliśmy domyślną wartość 5px. Teraz wystarczy odwołać się do tej klasy, przekazując jej nową wartość:

div#content{
   .border-radius(3px);
}

Jeżeli nie przekażemy żadnej wartości, Less skorzysta z domyślnej wartość, czyli 5px.

Operacje

Dzięki zmiennym możemy w jednym miejscu zadeklarować często używane wartości, takie jak kolor, grubość obramowania, marginesy itp. Dodatkową możliwością ułatwiającą nam pracę z CSS jest możliwość wykonywania operacji na tych zmiennych. Przydaje się to gdy definiujemy np obramowanie, i chcemy by górne było 1px grubsze od pozostałych. Zamiast tworzyć kolejna zmienną, dodajemy do istniejącej 1px i mamy sprawę załatwioną.

@border: 5px;
div#box{
   border-top: @border+1px;
   border-bottom: @border;
   border-left: @border;
   border-right: @border;
}

W tym przykładzie górne obramowanie ma wartość 6px, gdy pozostałe mają 5px. Możesz oczywiście wykonywać również inne operacje takie jak mnożenie, dzielenie, odejmowanie oraz operacje na kolorach takie jak: #888 / 4 lub #EEE + #111

Grupowanie cech

Ostatnią opisywaną dziś możliwością Less jest grupowanie cech. Na początek tworzymy selektor o unikalnym id:

#boxs{}

Pamiętaj by nie nadać, żadnemu elementowi w HTML takiego identyfikatora, gdyż odziedziczy on wszystkie zdefiniowane w nim właściwości. Następnie definiujemy tam wszelkie zmienne, lub inne selektory, które mogą należeć do takiej grupy. Ja dla przykładu umieszczam taki kod:

#boxs{
   @text-color: red;
   .border-radius{
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
   }
}

Aby wydobyć wartość zmiennej używamy takiej składni:

właściwość: nazwa_grupy[@nazwa-zmiennej]

natomiast, w przypadku klasy tej składni:

nazwa_grupy > nazwa_klasy

Poniżej przedstawiam przykład użycia dla obydwu przypadków:

div{
   color: #boxs[@border-color];
   #boxs > .border-radius;
}

W ten sposób możesz również wyciągać dane z innych klas np:

h1{color: red}
p{color: h1['color'];}

Ogólnie niema różnicy pomiędzy tym sposobem a zmiennymi, jednak mając na uwadze semantykę kodu, zaleca się stosować zmienne.

Dodatkowe elementy

W Less tak samo jak w każdym szanującym się języku można stosować komentarze, poprzedzając tekst dwoma slashami //. Tak jak w CSS tu również można importować inne pliki Less przy pomocy @import.

@import 'header';

Podsumowanie

Jak widać Less może nam bardzo ułatwić pisanie kodu CSS, a jego możliwości są na pewno warte uwagi. Jest to dobra alternatywa dla żmudnego pisania tych samych właściwości w wielu miejscach. Dodatkowo dzięki Less unikamy nadmiarowości kodu, przez co cały plik staje się czytelniejszy. Oczywiście na rynku są również inne tego typu rozwiązania takie jak SASS. Różnica pomiędzy tymi narzędziami jest taka, że LESS jest zblizony do składni CSS, kiedy to SASS nie używa w ogóle nawiasów klamrowych. Odmianą SASS jest SCSS i w tej wersji klamry już się znajdują. To czego ty będziesz używał zależy tylko i wyłącznie od ciebie.