Na blogu rzadko poruszam tematy CSS, ale czasami nawet jak ma się bardzo małą warstwę prezentacji, warto zainwestować trochę czasu w poznanie nowych bibliotek.
Dzisiaj chciałbym przedstawić LessCss. Biblioteka stanowi pewnego rodzaju pre-processor, który rozszerza możliwości klasycznego CSS. Na wyjściu zatem pojawi się zwykły CSS, który jest obsługiwany przez wszystkie przeglądarki. Sprawą “kompilacji”, zajmiemy się w innym wpisie, ponieważ istnieje wiele sposobów. Jednym z nich jest np. kompilowanie za pomocą JavaScript po stronie klienta. W tym poście będę korzystał z narzędzia online, które można znaleźć tutaj.
Załóżmy, że mamy kilka klas, które korzystają z tego samego koloru:
.customClass1 { color:red; } .customClass2 { color:red; } .customClass3 { color:red; }
Za pomocą LESS możemy zdefiniować zmienną:
@customColor: red; .customClass1 { color:@customColor; } .customClass2 { color:@customColor; } .customClass3 { color:@customColor; }
Po w klejeniu wspomniany wcześniej edytor online, zobaczymy, że na wyjściu @customColor zostanie zastąpiona wartością Red. Wszelkie zmienne w Less definiujemy za pomocą @. Zmiana wartości odbywa się za pomocą znaku ‘:’ (dwukropek).
Wszelkie stałe zatem można w łatwy sposób umieścić tylko w jednym miejscu. Zmienne nie ograniczają się jedynie do wartości. Możliwe jest również umieszczenie selektorów CSS w nich, tzn.:
@customSelector: .customClass; @{customSelector} { color:red; }
Po kompilacji:
.customClass { color: red; }
Zmienna ładowane są w sposób “lazy-loading. W praktyce oznacza to, że nie muszą być deklarowane przed ich użyciem. Poniższy kod również wygeneruje taką samą odpowiedź:
@{customSelector} { color:red; } @customSelector: .customClass;
Osobiście uważam, że może z tego wyniknąć wiele problemów.
W dokumentacji znalazłem również informacje, że możliwe jest korzystanie ze zmiennej jako nazwy dla kolejnej zmiennej. Spójrzmy na następujący kod:
@varName: 'test'; @test: 'red'; .customClass { color:@@varName }
Po kompilacji:
.customClass { color: 'red'; }
Moim zdaniem bardzo niebezpieczna konstrukcja. Podwójny operator @ wyciągnie najpierw wartość ze zmiennej varName, a potem użyje jej jako docelowej zmiennej.
W następnych wpisach skupie się na pozostałych możliwościach LESS oraz na kompilacji LESS do normalnego CSS.