Pierwotnym założeniem CSS było rozdzielenie stylu strony od jej treści. Jakkolwiek samo założenie nadal funkcjonuje to dzisiaj poziom skomplikowania i rozbudowania arkuszy stylów osiągnął taki poziom, że opanowanie naszego pliku css bywa problematyczne. Poza tym język CSS nie jest idealny i nie pozwala na działania bardziej elastyczne. Na szczęście na te problemy znalazło się rozwiązanie a są nim preprocesory CSS. W tym artykule przedstawimy krótką charakterystykę Less CSS.Czym jest Less? Jak reklamują go autorzy jest on „dynamicznym językiem arkuszy stylów”. W skrócie oznacza to, że dzięki językowi Less jesteśmy w stanie zaimplementować w naszym arkuszu dynamiczne zachowania (np. funkcje).
Przykład z oficjalnej strony:
1 2 3 4 5 6 7 | @color: #4D926F; #header { color: @color; } h2 { color: @color; } |
Kolor zapisany w powyższy sposób może być przywołany w dowolnym miejscu arkusza. Zdefinowanie jednego koloru nie jest jeszcze wielkim ułatwieniem, ale jeśli weźmiemy pod uwagę, że możemy dzięki takiemu zapisowi uporządkować sobie wszystkie wykorzystywane barwy zalety stają się raczej oczywiste.
Twórcy Less umożliwiają nam też wykorzystanie ich języka do tego by „przerzucać” właściwości z jednej klasy do drugiej. Dzięki takiemu zabiegowi możemy sprawić, iż inna klasa otrzymuje te same atrybuty i właściwości co inna ale nie musi być jej dzieckiem.
Przykład z oficjalnej strony:
1 2 3 4 5 6 7 8 9 10 | .rounded-corners (@radius: 5px) { border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } |
Kolejną zaletą Less, która może ułatwić życie każdemu webmasterowi i skrócić arkusz stylów jest zagnieżdżanie reguł dotycząych właściwości poszczególnych selektorów. Najprościej będzie uwidocznić to przykładem z oficjalnej strony Less:
1 2 3 4 5 6 7 8 9 10 11 12 | #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } |
Dzięki takmi rozwiązaniom nie trzeba się nadto rozpisywać. Możemy określić dziedziczenie w prosty, przejrzysty i przede wszystkim oszczędny sposób.
Dzięki temu preprocesorowi możemy też używać funkcji w naszym arkuszu stylów.
1 2 3 4 5 6 7 8 9 10 11 12 13 | @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } |
Tym krótkim artykułem chciałem Was zachęcić do tego by bliżej przyjrzeć się preprocesorowi Less i rozważyć jego użycie. Sam nie miałem jeszcze szerokiego kontaktu z tym językiem i jestem dopiero u progu nowego projektu, w którym będę go wykrzystywał (stąd brak mniej wysublimowanych przykładów niż te z oficjalnej strony :), ale słyszałem o nim wiele dobrego i dlatego jestem pozytywnie nastawiony do tego nowego doświadczenia.
Oficjalna strona: Less
warto by było też wspomnieć o SASS (i SCSS) oraz Stylus – alternatywach dla Less oraz o wsparciu w populernych edytorach i IDE… które niestety nie jest jeszcze na odpowiednim poziomie.
W kolejnych artykułach ;)
Less jest naprawdę pożyteczne – plik z tworzonymi stylami dzięki zagnieżdżaniu jest czytelniejszy, od razu widać strukturę i nie trzeba tysiąc razy kopiować selektorów. RKodu jest mniej i co za tym idzie, łatwiej się połapać co gdzie się znajduje. Ogólnie mogę polecić.
Ma to jedną wielką wadę, jeśli ktoś wyłączył JS nie ma CSS’a… Na zasadę progresywnego ulepszania less sobie bimba…
Po stronie klienta tak ale jest wiele innych opcji typu: instalacja po stronie serwera czy phpless ^^
LESS to konieczność jeśli chcecie rozczytać swój kod po pół roku – ba, to konieczność w przypadku większych serwisów www! Dodatkowo kod pisany przez jednego programistę jest dużo bardziej czytelny dla drugiego a co do implementacji to polecam kompresowanie LESS do CSS za pomocą chociażby windowsowego SimpLESS.