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.