Słowem wstępu - wiem, LESS to nic nowego, ale jak już pisałem wcześniej chcę pisać tylko o tym, czego sam używam i co mogę z czystym sumieniem polecić.

CSS i jego niedoskonałości

Każdy kto para się webdeveloperką wie co to CSS i chociażby standard 2.0 ma w małym palcu. Jeżeli tak, to doskonale też wie, czego w CSS brakuje - zagnieżdżania reguł, możliwości definiowania zmiennych, możliwości wykorzystywania tego samego kodu w wielu miejscach etc. Jak wiadomo - przyroda nie toleruje pustki, na skutek czego powstawały rozwiązania pozwalające na stosowanie w/w rozwiązań - działające zarówno po stronie serwera (np. stosowanie plików PHP do generowania CSS) lub po stronie klienta (wykonane w JS).

Światełko w tunelu - LESS

Aktualnie najpopularniejszym rozwiązaniem z grupy tych drugich jest LESS. Jego stosowanie ogranicza się do zmiany nazwy arkusza stylów z .css na .less oraz dodanie samej biblioteki do strony. Po tych zabiegach możemy korzystać już z pełnych dobrodziejstw, jakie oferuje skrypt. Popularną alternatywą jest SASS. Oba z tych języków są bardzo podobne zarówno pod wzg. możliwości jak i składni, więc wybór sprowadza się do osobistych preferencji programisty.

Zmienne

Podstawową funkcjonalnością, jaką oferują nam biblioteki tego typu, jest możliwość stosowania zmiennych. Dzięki temu możemy szybko np. zmienić kolor wielu elementów czy przesunąć serię bloków na stronie. Zmienne są też najłatwiejszym do opanowania elementem, przykładowy dokument .less:

@red: #ff0000;
@blue: #00ff00;

#naglowek {
	color: @red;
	background: @blue;
	font-size: 1.2em;
}

zostanie zinterpretowany jako:

#naglowek {
	color: #ff0000;
	background: #00ff00;
	font-size: 1.2em;
}

Reguły osadzone

Kolejną z często używanych funkcjonalności, która jednocześnie pomaga nam zapanować nad bałaganem, który może pojawić się w rozbudowanych arkuszach jest osadzanie reguł. Przykładowo:

.news {
	margin-top: 10px;
	font-size: 1em;

	&.lead {
		font-size: 1.1em;
	}

	.title {
		font-weight: bold;
		font-size: 1.2em;
	}

	p {
		line-height: 1.2em;

		code {
			font-style: italic;
		}
	}
}

przekształcony zostanie na:

.news {
	margin-top: 10px;
	font-size: 1em;

.news.lead {
	font-size: 1.1em;
}

.news .title {
	font-weight: bold;
	font-size: 1.2em;
}

.news p {
	line-height: 1.2em;
}

.news p code {
	font-style: italic;
}

W przykładowym kodzie LESS pojawia się zapis &.news, na który należy zwrócić uwagę - w miejsce znaku & podstawiany jest selektor elementu nadrzędnego, dzięki czemu możemy wybierać tagi oznaczone wieloma klasami.

Uwaga - rozwiązanie to wydaje się być na tyle przyjemne, że czasem możemy dać się ponieść i zacząć w LESS odtwarzać (prawie) pełną strukturę HTML elementu - należy jednak mieć na uwadze, że wraz ze wzrostem długości reguły wzrasta też złożoność wyszukania elementu, którego dotyczy. Dzieje się tak ponieważ selektory CSS interpretowane są od strony prawej. Starajmy się zatem tworzyć reguły zawierające nie więcej niż 2-3 poziomy zagłębienia!

Specjalną pod-grupę reguł osadzonych stanowią grupy osadzone z parametrem. Zapis ten pozwala nam na stworzenie jednej zbiorczej reguły, różniącej się tylko niektórymi wartościami. Jako przykład dokumentacja podaje zaokrąglanie rogów:

@niebieski: #00ff00;

.zaokragl (@promien: 10px) {
	border-radius: @promien;
}

.widget {
	background: @niebieski;
	border: 1px solid @niebieski;
	.zaokragl(5px);

	.badge{
		.zaokragl();
	}
}

przekształcony zostanie na

.widget {
	background: #00ff00;
	border: 1px solid #00ff00;
	border-radius: 5px;

.widget .badge{
	border-radius: 10px;
}

Co więcej?

Dużo, dużo więcej - LESS pozwala nam na operowanie na zmiennych za pomocą reguł matematycznych (width: (10px + 20px) * 2; przekształcimy na width: 60px;), definiuje funkcje operujące na kolorach (a:hover { darken(@color, 20%);} pozwoli nam na ściemnienie koloru linku o 20% po najechaniu). Pełną dokumentację znajdziecie oczywiście na stronie projektu, zdecydowanie wykracza on poza zakres tej notki.

Uwagi przy stosowaniu

Podczas stosowania LESS należy pamiętać o kilku sprawach:

• używanie plików .less i kompilowanie ich za pomocą JS przydatne jest tylko w procesie projektowania strony i zdecydowanie polecam stosowanie albo prekompilowanych (wygenerowanych ręcznie po każdej zmianie) plików CSS po uruchomieniu oficjalnie strony, albo stosowanie skryptów po stronie serwera, które będą kompilować plik .less jeżeli zajdzie taka potrzeba
• Internet Explorer (testowane w wersji 9) przechowuje plik .less w pamięci tymczasowej i zmiany mogą być nie widoczne po odświeżeniu strony - jeżeli bardzo zależy nam na testowaniu w IE, najłatwiej będzie dodać jakiś losowy parametr do adresu pliku
• wszelkie zapisy LESS muszą znajdować się w plikach .less, skrypt nie parsuje plików .css

Komentarze

2

Komentarz użytkownika BTM

26 01 2012

Polecam, zwłaszcza, że jest używana w nowym ściśle tajnym projekcie V. Na tyle ściśle tajnie, że nawet jeszcze samo V nie wie, że jest. Ciekawe, czy się zdziwią ;)

3

Komentarz użytkownika pecet

26 01 2012

Mogliby te ułatwienia dać do core CSS'a a nie :)

4

Komentarz użytkownika BTM

26 01 2012

@pecet niektóre z nich (zmienne, calc) są przewidziane dla CSS4 (http://end3r.com/slides/meet-css4) Definiuje on też wiele innych fajnych (filtry dla obrazków) i mniej fajnych (shadery?!) rzeczy. Ale jak zwykle - zanim zacznie obsługiwać to zdecydowana większość rynku ... a tak, można już dziś używać LESS bez obaw.

5

Komentarz użytkownika Wasacz

26 01 2012

@pecet: Nie wszystko z tego nadaje się bezpośrednio do CSS. Kilka tych rzeczy dosyć konkretnie może rzutować na czas parsowania i aplikowania CSS, które to teraz odbywają się praktycznie błyskawicznie. W dodatku spora część tych bajerów po prostu nie ma szans być kompatybilna wstecz, więc do niczego się nie przyda. A skoro będzie nieprzydatna, nikt tego nie zaimplementuje, A skoro nikt tego nie zaimplementuje…

6

Komentarz użytkownika bobiko

26 01 2012

LESS fajna sprawa ale wolę generować via SASS.