autor: Robert
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:
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.
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:
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.
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ć.
Osoby korzystające z konsoli na pewno zainstalowały sobie już wszystko co potrzeba:)
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