LESS tutorial logo

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:

itd…

Używając LESSa powyższy zapis będzie wyglądał następująco:

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:

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:

Teraz gdy w naszym arkuszu LESS wpiszemy:

Zostanie nam wygenerowany CSS wyglądający następująco:

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ę:)


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
Maciej 4 stycznia 2017 o 09:17

Świetny wstęp do less, faktycznie usprawnienia pisanie, nie trzeba powielać kodu ;)

Odpowiedz