Hello World
autor: Robert
26 stycznia 2015
Po kursie Bootstrapa i WordPressa postanowiłem przygotować dla Was tutorial jak korzystać z preprocesora LESS czyli Leaner CSS.
Jak wiecie wszystko co związane z komputerami tak szybko brnie do przodu i pojawia się tak wiele nowości, że czasami ciężko nad nimi nadążyć. LESS jest jednym z takich usprawnień.
Jego idea polega na szybszym tworzeniu arkuszy stylów za pomocą zmiennych, domieszek, funkcji, pętli itp czego standardowy CSS niestety nie udostępnia.
Przykładowo jeśli w arkuszu CSS używamy koloru czerwonego do ustalenia koloru fonta, tła, linka, ramki itp wszędzie musimy użyć zapisu np:
|
1 2 3 4 |
p { color: #ff0000; } a:hover { color: #ff0000; } div { background-color: #ff0000; } table { border-color: #ff0000; } |
itd…
Używając LESSa powyższy zapis będzie wyglądał następująco:
|
1 2 3 4 5 |
@primary-color: #ff0000; p { color: @primary-color; } a:hover { color: @primary-color; } div { background-color: @primary-color; } table { border-color: @primary-color; } |
Wyobraźcie sobie teraz, że korzystacie z czerwonego koloru w 45 miejscach i chcecie go zmienić na zielony. W CSSie musicie znaleźć wszystkie jego wystąpienia i podmienić je na #00ff00; a w LESSie wystarczy, że zmienicie wartość @primary-color z #ff0000; na #00ff00; i podczas kompilacji automatycznie wszystkie wartości zmiennej @primary-color wygenerują CSS wskazujący na kolor zielony.
Kolejny przykład to „domieszki” czyli gotowe kawałki kodu. Ile razy tworząc zaokrąglone rogi wpisywaliście formułki:
|
1 2 3 |
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; |
Nie dość, że zawsze trzeba wpisać te 3 linie, to jeszcze zmiana zaokrąglenia wiąże się z edycją w/w.
W LESSie stworzymy sobie domieszkę i później wystarczy się do niej odwoływać bez przepisywania kilku linii kodu CSS, poniżej przykład zaokrąglenia rogów diva za pomocą LESSa:
|
1 2 3 4 5 |
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } |
Teraz gdy w naszym arkuszu LESS wpiszemy:
|
1 2 3 |
div { .border-radius(5px); } |
Zostanie nam wygenerowany CSS wyglądający następująco:
|
1 2 3 4 5 |
div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
Oczywiście domieszka może zostać zastosowana do wielu elementów i za każdym razem jako jej parametr możemy podać inną wartość w pikselach. Domieszka może także zawierać dużo więcej niż tylko samo zaokrąglenie rogów, może być przykładowo gotowym przyciskiem gdzie w parametrach podacie jego kolor, wielkość, marginesy itp itd…
Sami musicie przyznać, że znacząco usprawnia to pisane arkuszy stylów i pozwala na ich łatwiejszą i szybszą modyfikację:)
Komentarze: 2 komentarze
Mike 1 września 2016 o 15:34
Super tłumaczysz. Od ogółu do szczegółu i dodatkowo świetnie wpierw opisujesz szybko daną rzecz, a potem jeżeli można to dalej modyfikować to podajesz jak i po co. Wielu autorów podaje jakiś modyfikator, ale nie powie _dlaczego_ on w ogóle powstał, jaki był zamysł, albo nie idą hierarchicznie od rzeczy które były wpierw, tylko opisują wiele możliwości równocześnie i ma się wrażenie skomplikowania sprawy. Nie umiem dokładnie oddać tego o co mi chodzi, ale Twoje opisy mają w sobie zawartą historię i celowość, a nie tylko suche dane. Super!
Odpowiedz
