LessJS, preprocesor CSS, stał się teraz podstawą w tworzeniu stron internetowych. Zawiera prosty CSS z funkcjami programistycznymi, takimi jak Zmienne. CoCo to jest LessJS i jak działa??
Funkcje lub Mix and Operate, które umożliwiają twórcom stron internetowych tworzenie modułowych stylów CSS, skalowalny i łatwiejszy w zarządzaniu.
LessJS, był jednym z najpopularniejszych procesorów CSS i został również szeroko zaimplementowany w wielu frameworkach front-endowych tak jak zrobił to Bootstrap, dodając komponenty do strony lub aplikacji internetowej
Oczywiście dzisiaj mamy różne języki programowania takie jak programowanie w języku R, które można zainstalować i uruchomić na komputerze.
Co to jest Less i jak to działa?
Kompilator
Aby rozpocząć, musimy skonfigurować kompilator. Zgodnie ze specyfikacją W3C składnia LESS nie jest standardowa. Przeglądarka nie mogła przetworzyć i wygenerować danych wyjściowych, pomimo dziedziczenia cech podobnych do CSS.
Oto spojrzenie na kod LESS:
@ base de color: # 2d5e8b;
.class1 {
background-color: @ color-base;
.class2 {
background-color: #fff;
color: @ color-base;
}
}
kompilator przetworzy kod i przekonwertuje składnię LESS w formacie CSS kompatybilnym z przeglądarką:
.class1 {
background-color: # 2d5e8b;
}
.class1 .class2 {
background-color: #fff;
color: # 2d5e8b;
}
Używanie JavaScript w LessJS
LessJS jest dostarczany z plikiem less.js, który jest plikiem JavaScript. Utwórz arkusz stylów z rozszerzeniem .less i połącz go w swoim dokumencie za pomocą atrybutu rel = „arkusz stylów / mniej”.
<link rel = "hoja de estilo / menos" type = "text / css" href = "main.less" />
Możesz pobrać plik JS, pobierz go za pomocą menedżera pakietów bower, w przeciwnym razie możesz połączyć się bezpośrednio z CDN.
< link rel = "hoja de estilo / menos" type = "text / css" href = "main.less" /> <script src = "// cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less .min.js "> </script>
Wszystkie są skonfigurowane i mogą komponować style wewnątrz .mniej. Składnia LessJS będzie kompilowana w locie podczas ładowania strony.
Należy pamiętać, że korzystanie z JavaScript nie jest zalecane w produkcji, ponieważ poważnie wpłynie na działanie strony internetowej.
Korzystanie z interfejsu wiersza polecenia LessJS
LESS zapewnia natywny interfejs wiersza poleceń (CLI), lessc, który obsługuje kilka zadań poza zwykłą kompilacją składni LessJS. Za pomocą CLI możemy usunąć kody, skompresuj pliki i utwórz mapę źródłową. Polecenie jest oparte na Node.js, co skutecznie pozwala na działanie polecenia w systemach Windows, OS X i Linux.
npm install -g less
Ale już masz do dyspozycji komendę lessc skompilować LESS do CSS:
lessc style.less style.css
Korzystanie z Task RunnerRunner
Zadania narzędzie automatyzujące zadania programistyczne i przepływy pracy. Zamiast uruchamiać komendę lessc za każdym razem, chcielibyśmy skompilować nasze kody.
Mogą zainstalować program uruchamiający zadaniaskonfiguruj go tak, aby obserwował zmiany w naszych plikach LESS i natychmiast skompiluj LESS do CSS.
Korzystanie z aplikacji graficznej
Dla tych, którzy nie są przyzwyczajeni do korzystania z Terminala i wiersze poleceń, można wybrać interfejs graficzny. Obecnie istnieje mnóstwo aplikacji LESS do zbudowania na wszystkie platformy.
Edytor kodu
Mogą użyj dowolnego edytora kodu. Wystarczy zainstalować wtyczkę lub rozszerzenie, aby podświetlić składnię LESS odpowiednimi kolorami.
Funkcja, która jest teraz dostępna dla prawie wszystkich edytorów kodu i środowisk IDE, w tym SublimeText, Notepad++, VisualStudio, TextMate i Eclipse, pośród innych.
Składnia LessJS
W przeciwieństwie do zwykłych CSS, jakie znamy, LessJS działa bardziej jak język programowania. Jest dynamiczny, więc spodziewaj się napotkać terminologię, taką jak Zmienne, Działanie i zakres na drodze.
zmienne
Przyjrzymy się zmiennym. Jeśli pracujesz wystarczająco długo z CSSpewnie napisałeś, gdzie mamy powtarzające się wartości przypisane w blokach deklaracji w całym arkuszu stylów.
.class1 {
background-color: # 2d5e8b;
}
.class2 {
background-color: #fff;
color: # 2d5e8b;
}
.class3 {
border: 1px solid # 2d5e8b;
}
Ta praktyka jest naprawdę dobradopóki nie będziemy zmuszeni przeanalizować ponad tysiąc lub więcej podobnych fragmentów w całym arkuszu stylów.
to może się zdarzyć podczas tworzenia dużej witryny internetowej. Praca będzie żmudna, jeśli nie korzystamy z preprocesora CSS takiego jak LessJS.
Powyższy przypadek nie byłby problemem, możemy użyć zmiennych. Zmienne pozwolą nam przechowywać stałą wartość, którą można następnie wykorzystać w całym arkuszu stylów.
@ base de color: # 2d5e8b;
.class1 {
background-color: @ color-base;
}
.class2 {
background-color: #fff;
color: @ color-base;
}
.class3 {
border: 1px solid @ color-base;
}
W powyższym przykładzie przechowujemy kolor #2d5e8b w zmiennej @color-base. Kiedy chcesz zmienić kolor, wystarczy zmienić wartość w tej zmiennej.
Poza kolorem w zmiennych można umieścić również inne wartości jak np.:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5
