Jak pewnie wielu z Was pamięta, w jednym z ostatnich wpisów poruszyłem temat LESS czyli swego rodzaju rozszerzenia CSS, pozwalającego na re-używanie kodu, definiowanie zmiennych itp., itd. Wpis tamten zdecydowanie był jedynie wstępem do bardziej szczegółowego opisu możliwości tego rozwiązania – napisałem w końcu tylko jak zacząć używać LESS oraz pokazałem jeden prosty przykład kodu… Dziś zatem pora na znaczne poszerzenie tego tematu. Dlatego też tematem dzisiejszego wpisu są podstawy LESS czyli więcej szczegółów dotyczących tego pre-procesora… postaram się przybliżyć Wam większość możliwości języka (bo w sumie chyba tak można to nazwać z punktu widzenia developera), wszystko oczywiście poparte przykładami. A więc do dzieła!

Komentowanie kodu

Dla porządku, krótka informacja – w LESS możemy używać komentarzy w obu popularnych formach, a więc nie tylko „/* komentarz */” jak w CSS ale również „// komentarz”. Przy czym podczas kompilacji do CSS, ta druga forma jest pomijana i nie znajduje się w wynikowych plikach *.css.

Zmienne w LESS

Na początek absolutne podstawy LESS, a więc zmienne. Myślę, że nie ma tutaj co wyjaśniać czym są zmienne… W LESS służą one do przypisywania do nich pewnych wartości, które później można re-używać w innych miejscach stylu. Spójrzmy na przykład:

@links: #FF0000;
@links_hover: @links - #AA0000;

W pierwszej linii przypisuję kolor zmiennej, która później zostanie użyta do nadawania koloru linkom – jak widać zmienne, dla ich odróżnienia oznaczamy znakiem „@”. Tak zdefiniowaną zmienną możemy teraz podstawiać gdziekolwiek w pliku *.less i podczas „kompilacji” pliku do CSS zostanie zamiast niej podstawiony odpowiedni kolor.

W drugiej linii widzimy, że zmienne możemy „miksować” z innymi wyrażeniami – w przykładzie definiuję link, nad którym znajduje się wskaźnik myszy. Do tego celu użyłem zmiennej „@links”, od której odejmuję pewną wartość, dzięki czemu uzyskuję modyfikację koloru podstawowego.

Ciągi znaków

Do zmiennych można również przypisywać ciągi znaków. Nie byłoby w tym nic niezwykłego, jednak czasem może być potrzebne „wstrzykiwanie” takich „stringowych” zmiennych do innych ciągów znaków. Jest to bardzo proste – wystarczy użyć w ciągu znaków, odwołania do zmiennej w taki oto sposób:

@url = 'http://burczu-programator.pl';
background-image: url("@{url}/img/bckg.png");

Efektem powyższego kodu jest wstrzyknięcie zawartości zmiennej „@url” w miejsce wyrażenia „@{url}” wewnątrz ciągu znaków przekazanych do funkcji „url”.

Mixiny – po naszemu „wstawki”

Szczerze mówiąc nie wiem czy to wymyślone słowo, czy może rzeczywiście istnieje takie w języku angielskim :-) Google Translate przetłumaczył „mixin” jako „wstawek” co w sumie dobrze oddaje tę konstrukcję w LESS. Ogólnie jednak rzecz biorąc to również są zupełne podstawy LESS. Generalnie „mixin” jest to zwykła klasa CSS zdefiniowania bez podawania nazwy elementu. Tak zdefiniowaną klasę możemy później dowolnie używać przy definicji innych klas. Zresztą spójrzmy na przykład – to na pewno rozjaśni Wam tę moją pokrętną definicję:

.background {
    background-color: #DEDEDE;
}

div.main {
    margin: 10px 5px;
    .background;
}

.menu {
    color: #000000;
    .background;
}

Myślę, że od razu widać tę bardzo przydatną właściwość LESS: raz zdefiniowaną klasę, możemy później używać w innych klasach. Mało tego, klasę „background” możemy normalnie przypisywać do elementów HTML! Bardzo wygodna rzecz…

Mixiny z parametrami

Tak jak głosi tytuł tego paragrafu, mixiny w LESS dają nam coś więcej niż tylko re-używanie klas w innych klasach. Możemy również przekazywać im parametry – wystarczy do tego celu zmodyfikować trochę nasz poprzedni przykład:

.background ( @color: #DEDEDE ) {
    background-color: @color;
}

div.main {
    margin: 10px 5px;
    .background;
}

.menu {
    color: #000000;
    .background ( #828282 );
}

Już w pierwszej linii widzimy co się dzieje – definicja klasy „background” wygląda teraz bardziej jak deklaracja funkcji, która może przyjmować jako parametr zmienną „@color” (mało tego, zmienna ta ma ustawioną wartość domyślną). Jak widać w drugiej linii, kolor tła ustawiony zostaje z użyciem tej właśnie zmiennej a nie konkretnego koloru.

Sposób użycia tak zdefiniowanego „mixina” widzimy w zaznaczonych liniach – w pierwszym przypadku użyty zostaje kolor domyślny, w drugim przekazujemy jako zmienną jakiś inny kolor.

Dziedziczenie

Kolejna bardzo fajna właściwość LESS, a mianowicie dziedziczenie pozwala nam na łatwiejsze zapanowanie nad kodem CSS. Zamiast pisać coś takiego…:

.header h2 {
  font-size: 24px;
}

.header a {
  color: #FF0000;
}

.header a:hover {
  color: #550000;
}

…możemy użyć dziedziczenia LESS i napisać coś bardziej czytelnego i bliższego „normalnemu” językowi programowania:

.header {
  h2 {
    font-size: 24px;
  }

  a {
    color: @links;

    &:hover {
      color: @links_hover;
    }
  }
}

Prawda, że wygodniej? Dodatkowo, w zaznaczonej linii użyty został znak „&” – używamy go przy definiowaniu pseudo klas i oznacza on odwołanie do elementu, w naszym przypadku „a” (jest to coś podobnego do „this” w innych językach programowania).

Operacje arytmetyczne

Przykład operacji arytmetycznych przy definiowaniu stylów w LESS widzieliście już w pierwszym przykładzie tego wpisu, gdzie odejmowałem pewną liczbę od zdefiniowanego wcześniej koloru. Inne przykłady takich operacji poniżej:

@main_width: 960px;
@right_column: @main_width / 3;
@left_column: (@main_width / 3) * 2;

Myślę, że nie ma sensu tutaj niczego wyjaśniać. Zasady stosowania operacji arytmetycznych podczas definiowania stylów w LESS są tożsame z tymi dostępnymi w innych językach programowania.

Funkcje kolorów

LESS dostarcza mnóstwa funkcji pozwalających na różnorakie operacje na kolorach. Oczywiście nie dam rady opisać ich wszystkich w tym wpisie – dla dociekliwych, możecie się z nimi wszystkim zapoznać w dokumentacji funkcji LESS. Ja pokaże tylko pierwszy z brzegu przykład, aby pokazać o co chodzi:

background-color: multiply(#ff6600, #333333);

W przykładzie tym użyłem funkcji „multiply” do zdefiniowania koloru tła. Funkcja ta łączy dwa kolory poprzez zmieszanie dwóch korespondujących ze sobą kanałów RGB, a następnie wybiera ciemniejszy kolor i zwraca go (definicja z dokumentacji LESS :-)).

Namespace’y

Kolejny sposób na organizację naszych stylów. Dzięki namespace’om możemy grupować klasy (mixiny) aby później używać niektórych z nich w naszych stylach. Spójrzmy na przykład:

#defaults {
  .background ( @color: #DEDEDE ) {
    background-color: @color;
  }

  .color {
    color: @green;
  }
}

Pierwsze co rzuca się w oczy to znak „#” przed nazwą namespace’u – oczywiście wygląda to jak selektor elementu po jego identyfikatorze… Jednak dzięki takiemu zapisowi możemy też re-używać nasze mixiny w innych miejscach stylu, wybierając tylko poszczególne mixiny danego namespace’u za pomocą poniższej konstrukcji:

h1 {
  #defaults > .color;
}

Dzięki temu elementowi „h1” przypisane zostaną wartości zdefiniowane w mixinie „.color” czyli w naszym przypadku zielony kolor tekstu.

Zakres zmiennych

Tak jak w większości języków programowania, tak i w LESS mamy do czynienia z zakresami zmiennych. Działa to dokładnie tak jak się tego spodziewa każdy programista… Spójrzcie na przykład:

@color: #FF0000; /* czerwony */

#defaults {
  @color: #0000FF; /* niebieski */

  background-color: @color; /* niebieskie tło */
}

#specials {
  background-color: @color; /* czerwone tło */
}

Myślę, że wszystko jest tutaj jasne :-)

JavaScript w stylach LESS

LESS ma jeszcze jedną, czasem przydatną, funkcję. Możemy mianowicie stosować w naszych stylach stosować proste wyrażenia JavaScript. Popatrzcie na przykład:

@name_uppercase: ‘”burczu”.toUpperCase()’;

W powyższym przykładzie do zmiennej „@name_uppercase” zostanie przypisana wartość „BURCZU”. Myślę, że ta właściwość LESS nie przydaje się często (a może się mylę?) ale warto o niej wiedzieć.

Podstawy LESS - podsumowanie

Na dziś to wszystko co przygotowałem, tak wyglądają podstawy LESS. Myślę, że opisałem większość podstawowych możliwości tego narzędzia – jak widać nie ma tego aż tak dużo, a jednocześnie jak jest to przydatne i jak bardzo ułatwia opanowanie naszych stylów CSS!