LESS tutorial logo

Kompilacja LESS do CSS

autor: Robert

27 stycznia 2015

Przeglądarki internetowe nie są w stanie „zrozumieć” stylów zapisanych za pomocą LESSa dlatego muszą być kompilowane do standardowego pliku CSS.

Istnieje wiele możliwości kompilacji, które pokrótce opiszę poniżej:

Kompilacja w przeglądarce

W naszym pliku index.html umieszczamy bibliotekę LESSa, która kompiluje kod pliku *.less podczas wczytywania strony. Najprostszą metodą jest skorzystanie z serwerów CDN czyli zamieszczenie w sekcji <head> adresu

Lub pobranie biblioteki STĄD i dołączenie do dokumentu.
A następnie ścieżki do naszego pliku *.less czyli przykładowo:

Metoda ta powinna być przez Was używana jedynie podczas nauki albo testów gdyż biblioteka less.js jest dość duża i wpływa na czas ładowania strony na co nie można sobie pozwolić gdy strona jest już widoczna w sieci i korzystają z niej użytkownicy.

Kompilatory On-Line

Kolejna metoda kompilacji polega na wklejeniu swojego kodu do kompilatora, który znajduje się na stronie WWW i który zwróci nam gotowy kod CSS. Przykładowe strony z kompilatorami on-line:

Kompilatory z GUI

Możemy zainstalować sobie programy, które posiadają wbudowane edytory tekstu lub tylko umożliwiają kompilację plików LESS do CSS. Programy wieloplatformowe dla Windows, MacOS i Linux:

Niestety nie testowałem żadnej z tych aplikacji. Pochwalcie się w komentarzach gdy będziecie z nich korzystać by ułatwić innym wybór.

Wtyczki do edytorów tekstu

Praktycznie każdy edytor posiada wtyczkę czy moduł, który pozwala na kompilowanie plików LESS do CSS. Wystarczy, że wpiszecie w Google „‚mój-ulubiony-edytor’ less compiler” i wybierzecie, która Wam najbardziej będzie pasować.

Kompilacja za pomocą linii poleceń (konsoli)

Osoby korzystające z konsoli na pewno zainstalowały sobie już wszystko co potrzeba:)

 


Roman 7 marca 2016 o 21:02

Kozystalem z Koala w trakcie pisania w scss i musze przyznac ze mnie pozytywnie zaskoczyl na pocztku musialem podac plik do sledzenia a koala automatycznie mi stworzyl plik .css a jesli chodzi o kompilacje to w momencie gdy napisalem kilka linijek kodu i zapisalem plik .scss , w pliku css byl juz skompilowany kod :-)

Odpowiedz