LESS czyli prawdziwa siła Twitter Bootstrapa

Bootstrapa autorstwa programistów Twittera nikomu nie trzeba chyba przedstawiać. Na jego temat napisano już niezliczone ilości wpisów na blogach, ilość pluginów liczona jest w setkach i powoli ma się wrażenie, że co drugi projekt open-source korzysta z tego narzędzia do stworzenia domowej strony projektu. Właśnie z tego może wynikać potrzeba napisania o najważniejszej składowej tego frameworka css, jaką jest LESS.

Kilka słów wstępu o LESS

LESS to dynamiczne arkusze stylów, rozszerzające CSS o elementy dynamicznych języków, takie jak zmienne, domieszki (mixins), operacje i funkcje. LESS działa zarówno w przeglądarkach (Chrome, Safari, Firefox) jak i po stronie serwera. Wszystkie informacje o nim można znaleźć na podanej stronie domowej i należy zapoznać się z nimi by dalsza część tego wpisu mogła być zrozumiała.

W momencie pisania tego wpisu, nie ma jeszcze stabilnej wersji 3.x Bootstrapa, więc wpis odnosi do wersji 2.3.x.

Wykorzystanie w Bootstrapie

Na stronie domowej Bootstrapa mamy dwie możliwości pobrania frameworka. Pobieramy standardową paczkę z plikami zawierającymi wszystkie elementy frameworka lub tworzymy paczkę wybierając elementy, które mają się w niej znaleźć. Druga możliwość dynamicznego tworzenia pliku z wybranymi elementami daje nam pierwszy obraz tego jakie możliwości przynosi nam wykorzystanie LESS. Korzystając z tego generatora de facto wybieramy, które pliki less mają być załadowane i przekompilowane do pliku wynikowego css.

Żeby pobrać pliki less musimy odwiedzić repozytorium Bootstrapa w serwisie Github i pobrać pełną paczkę ze wszystkimi plikami frameworka. Wśród nich będzie również folder z plikami less.

Podział plików LESS

Możemy wyróżnić kilka rodzajów plików:

  • bootstrap.less – jest odpowiedzialny za ładowanie pozostałych i to w nim deklarujemy, które komponenty chcemy używać;
  • variables.less – to lista wszystkich zmiennych wykorzystywanych w pozostałych plikach
  • mixins.less – jest esencją wykorzystania less, bowiem zawiera tzw. domieszki, czyli zbiory reguł określających właściwości elementu formatowanego css’em
  • grid.less, layouts.less, scaffolding.less, type.less, utilities.less i najważniejszy w tej grupie reset.less – stanowią grupę plików odpowiedzialnych za stworzenie podstawowego szkieletu frameworka
  • pozostałe pliki są komponentami, odpowiedzialnymi za formatowania określonych elementów

Strategia pracy

Powyższego podziału dokonałem aby łatwiej było zrozumieć pewną zależność. Pierwsze trzy pliki są plikami niezbędnymi dla prawidłowego działania reszty – pliki szkieletu i modułów są zależne od elementów zawartych w variables.less i mixins.less. Jakakolwiek modyfikacja zmiennych i reguł w nich zawartych będzie miała automatyczny wpływ na działania (lub też brak działania) podczas kompilowania do css. Pliki szkieletu stanowią preformatownie większości elementów, ale można je edytować bez obawy.

Można więc zasugerować, że mam grupę plików podstawowych, które stanowić mogą podstawę i zawsze są wczytywane w bootstrap.less, oraz plików modułów/elementów frameworka, które najlepiej przenieść do osobnego folderu i wczytywać tylko te, z których będziemy korzystać. Ma to dwie zasadnicze korzyści. Po pierwsze: zyskujemy pewną przejrzystość i łatwość zmian w podstawie frameworka (plik wynikowy jest bardzo mały). Po drugie: kontrolujemy wykorzystywanie wczytywanych elementów, oraz dodawania własnych.

Dobrą praktyką może być tworzenie własnych kompletnych elementów – wstawek (snippets), z zachowaniem wykorzystania zmiennych z variables.less. Przenosząc ten sam plik elementu między różnymi podstawami (czyli różnymi zbiorami reguł i wartościami zmiennych), będziemy w łatwy sposób otrzymywać odmiennie sformatowane pliki css – mówiąc krótko, mamy praktyczny przykład stosowania zasady DRY we frontendzie.

Kompilowanie

Kompilować możemy po stronie przeglądarki, ale „na produkcji” powinniśmy korzystać już ze skompilowanego pliku css. Jeśli zakładamy, iż będziemy edytować pliki less online lub np. less chcemy wykorzystać do umożliwienia użytkownikom strony zdefiniowania np. własnych kolorów, wielkości (np.: użytkownik ma swój szablon css) będziemy musieli kompilować po stronie serwera i zapisywać plik. Najlepiej stworzyć sobie narzędzie do automatycznej kompilacji w momencie zmiany (zapisywania) pliku. Oczywiście największe możliwości stwarza tutaj node.js, ale są też inne opcje. Po stronie serwerowej można również polecić bardzo dobre rozwiązanie jakim jest biblioteka dla php – lessphp.

Podsumowanie

Spotkałem się już ze stwierdzeniem, że Bootstrap to duży kombajn, który przytłacza, a jak wiadomo programista czy web developer, chciałby mieć tylko tyle kodu ile potrzeba. Siłą LESS w Bootstrapie jest to, że gdy zaczniemy go modyfikować, to bardzo szybko odkryjemy, że ze standardowego szablonu możemy zrobić bardzo małym nakładem sił szablon, po którym nikt się nie będzie spodziewał, że wykorzystaliśmy Bootstrapa. Poza tym to wprowadza dużo uporządkowania do pracy nad projektami, zwłaszcza do takich w których nad różnymi elementami tego samego projektu pracują różne osoby.

ps. polskie tłumaczenie dokumentacji

Programista, web developer, marketingowiec. Od wielu lat związany z branżą reklamy i mediów. Robi backend, kocha frontend, będąc ewangelistą kilku technologii. Prywatnie minimalista, trochę introwertyk, perfekcjonista. Nie lubi kotów ;)

  • ApkoDoApkaImam2apka

    lubie darmowe apki, co mogą się na coś przydać.

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL