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
|
1 |
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script> |
Lub pobranie biblioteki STĄD i dołączenie do dokumentu.
A następnie ścieżki do naszego pliku *.less czyli przykładowo:
|
1 |
<link rel="stylesheet/less" type="text/css" href="style.less" /> |
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:)
Komentarze: (1)
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
