close
LESS

Kurs LESS – błyskawiczne tworzenie stylów CSS

kurs-less-blyskawiczne-tworzenie-stylow-css

Jeśli jesteś Web Developerem, który nie miał jeszcze do czynienia z preprocesorami CSS, to ten artykuł jest dla Ciebie. W ciągu kilkunastu minut poznasz i zaczniesz korzystać z najbardziej użytecznych elementów preprocesora LESS.

W tym artykule omówimy i przećwiczymy najważniejsze zagadnienia LESS. Po przeczytaniu będziesz mógł natychmiast użyć LESS w swoich projektach. Tematy, które poruszymy:

  • krótki wstęp do LESS
  • wsparcie plików .less w edytorze
  • zagnieżdżanie
  • zmienne
  • mixiny
  • importowanie

Czym jest LESS?

LESS jest preprocesorem CSS z bardzo podobną składnią. LESS zawiera mnóstwo przydatnych funkcjonalności, które niesamowicie przyśpieszają pracę front-end developera. Jak to wygląda w praktyce?

Powyższy kod:

  • importuje plik reset.less
  • ustawia tło diva
  • zmienia szerokość diva w zależności od rozdzielczości
  • rozjaśnia link o 75% po najechaniu na niego kursorem

Podświetlanie składni w plikach .less

Część edytorów kodu nie rozpoznaje plików LESS (.less) lub wymaga instalacji dodatkowych pakietów. Wśród edytorów, które wspierają LESS bez dodatkowych instalacji, mogę polecić Atom i Brackets.

Przed przejściem dalej upewnij się, że Twój  edytor prawidłowo podświetla składnie. Utwórz plik style.less i wklej do niego powyższy kod. Jeśli poszczególne elementy kodu różnią się kolorem, to możesz przejść do kolejnej części.

Kompilacja kodu LESS do CSS

Style napisane w LESS nie mówią nic przeglądarce. Musimy je najpierw skompilować do kodu CSS.  Pomoże nam w tym Koala – program, który wykryje wszystkie zmiany w plikach .less i zamieni je na .css. Pliki CSS podepniemy następnie do strony.

Aby pobrać Koala, wejdź na tę stronę i naciśnij przycisk Download. Po instalacji otwórz program. Pokaże się podobne okno:

koala

Abyś nie tracił czasu na tworzenie struktury plików, zrobiłem to za Ciebie. Gotowy folder możesz pobrać tutaj. Po pobraniu i wypakowaniu archiwum otwórz okno Koala i przeciągnij folder less  w obszar okna.

kompilacja koala

Od tej pory przy każdym zapisie dowolnego z plików całość będzie kompliowana – nie musimy tego robić ręcznie.

Funkcjonalności LESS

Posiadasz już edytor podświetlający prawidłowo składnie plików .less i program Koala, który kompiluje te pliki do .css. Możemy teraz przejść do funkcjonalności LESS.

Zagnieżdżanie

Zagnieżdżanie to jedna z funkcjonalności, dzięki której zaoszczędzisz najwięcej czasu. Jednocześnie jest bardzo proste i możesz z niego skorzystać natychmiast. Jak to działa?

W pliku style.less wpisz kod:

Zapisz style.less i otwórz style.css:

Jak widzisz kod zapisany w LESS, został przepisany w CSS. Zagnieżdżanie umożliwia użycie selektora jednorazowo. Znacznik ul w kodzie LESS użyty jest tylko raz.  Kod jest krótszy i bardziej przejrzysty. Edycja kodu LESS jest również znacznie prostsza.

Zmienne

Zmienne są kolejną funkcjonalnością, która potrafi zaoszczędzić mnóstwo czasu. Jak działają?

W pliku style.less wpisz kod:

Zapisz style.less i otwórz style.css:

Wartości zmiennych zostały podstawione w CSS. Zmienne szczególnie przydają się podczas edycji stylów strony. Zamiast zmieniać kolor odnośników w kilkudziesięciu miejscach, możesz to zrobić tylko w zmiennej. Nowa wartość zostanie podstawiona automatycznie.

Zmienne sprawdzają się świetnie w media queries. Wystarczy, że na początku stylów umieścisz zmienne:

Następnie możesz ich używać w ten sposób:

Element z klasą sidebar będzie niewidoczny poniżej 768px szerokości. Pomiędzy 768px a 1200px będzie miał 30% szerokości. Powyżej 1200px szerokość zmniejszy się do 20%.

Mixiny

Mixiny pozwalają na utworzenie zestawu reguł wielokrotnego użytku. Dzięki nim możesz dołączyć wszystkie właściwości jednej klasy do drugiej. Jak to zrobić?

W pliku style.less wpisz kod:

Zapisz style.less i otwórz style.css:

Zestaw reguł został podstawiony do obu elementów.

Możemy rozszerzyć funkcjonalność mixin przez dodanie parametrów.

W pliku style.less wpisz kod:

Zapisz style.less i otwórz style.css:

Widzisz już pewnie jakie możliwości dają mixiny w LESS. Używaj ich zawsze, gdy te same reguły występują w wielu miejscach.

Operacje

Operacje umożliwiają przeprowadzanie prostych operacji matematycznych wewnątrz kodu CSS. Możesz ich używać na:

  • liczbach (np. 300px)
  • kolorach (np. #893251)
  • zmiennych

Jak działają?

W pliku style.less wpisz kod:

Zapisz style.less i otwórz style.css:

Importowanie

Importowanie w LESS pozwala na połączenie kilku plików .less w jeden końcowy .css.  Jak to działa w praktyce?

Taki podział plików znacznie ułatwi późniejszą edycję. Wszystkie pliki zostaną skompilowane do wynikowego .css.

Podsumowanie

Przy pierwszym zetknięciu z LESS nie byłem przekonany. Całkiem wygodnie pisało mi się już w klasycznym CSS i nie chciałem przyzwyczajać się do “nowej” składni. Po pierwszym projekcie wiedziałem, że do klasycznego CSS już nie wrócę.

Użycie LESS zaoszczędzi Ci wiele godzin powtarzalnej pracy nad stylami strony.

Masz pytania? Zadaj je w komentarzu 🙂

  • Krzysztof Kwiatkowski

    Dobry wpis dla początkującego. Sam kiedyś zainteresowałem się less i wiem jak ułatwia kodowanie. Co ciekawe są już edytory które w locie tworząc z plików less -> css. Na widnows zauważyłem świetny edytor od microsoftu Visual Studio Code z pluginem EasyLess możemy w locie tworzyć pliki css, także w wersji min.css. Koala jest zbędny. Sam piszę pod OSX i mam Coda 2 z pluginem do Less i też nie ma potrzeby korzystać z zewnętrznych konwerterów. Less to wielka oszczędność czasu i możliwość pewnej automatyzacji. Co do wpisu, bardzo dobry na początek. Mała uwaga, wpis byłby pełniejszy z krótkim opisem małej wtyczki less.js 🙂

    • Dzięki!

      Myślałem nad krótkim wspomnieniem less.js, ale artykuł jest skierowany do początkujących i nie chciałem już mieszać 🙂

      • Krzysztof Kwiatkowski

        Wydaje mi się że dla kogoś kto chce przetestować less, ta opcja na początek jest najprostsza.

  • Świetne! Dzięki!

  • Dobry wpis, naprawdę mega przejrzyście i łopatologicznie opiane 😀
    Koala jest fajny bo radzi sobie zarówno z Lessem jak i Sassem, fajną opcją jest również automatyczna kompilacja takich plików w edytorach (po dograniu odpowiednich wtyczek) 🙂

    • Dzięki! 🙂

      Fajną opcję jest też automatyczna kompresja plików w Koala. Kompilacja w edytorze to też dobra opcja, ale jakoś się do Koali przyzwyczaiłem 🙂

  • Sharpi

    o jprdl…to jeszcze bootcamp do zestawu i projekty same się będą pisać oO