MNIEJ CSS - Przewodnik dla początkujących

Preprocesor CSS stał się teraz podstawą w tworzeniu stron internetowych. Dostarcza zwykły CSS z cechami programowania, takimi jak Zmienne, Funkcje lub Mixin i Operacja, które pozwalają programistom na budowanie modułowe, skalowalne i łatwiejsze w zarządzaniu style CSS.

W tym poście zajmiemy się LESS, który był jednym z najpopularniejszych preprocesorów CSS, a także został szeroko wdrożony w wielu front-endowych strukturach, takich jak Bootstrap. Będziemy także przechodzić przez podstawowe narzędzia, narzędzia i konfiguracje, które pomogą Ci uruchomić i korzystać z LESS.

Kompilator

Na początek musimy skonfigurować kompilator. Składnia LESS jest niestandardowa, zgodnie ze specyfikacją W3C. Przeglądarka nie byłaby w stanie przetworzyć i renderować danych wyjściowych, pomimo dziedziczenia cech podobnych do CSS.

Oto rzut oka na kod LESS:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; kolor: @ kolor-podstawa;

Kompilator przetworzy kod i przekształci składnię LESS w zgodny z przeglądarką format CSS:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; kolor: # 2d5e8b;

Istnieje wiele narzędzi do kompilowania CSS:

Korzystanie z JavaScript

LESS pochodzi z less.js plik, który jest naprawdę łatwy do wdrożenia w Twojej witrynie. Utwórz arkusz stylów za pomocą .mniej rozszerzenie i połącz je w swoim dokumencie za pomocą rel = "arkusz stylów / mniej" atrybut.

Możesz uzyskać plik JS tutaj, pobierz go za pomocą menedżera pakietów Bower, w innym przypadku bezpośrednio link do CDN, tak:

Jesteś cały ustawiony i możesz komponować style w .mniej. Składnia LESS zostanie skompilowana w locie podczas ładowania strony. Weź pod uwagę, że Używanie JavaScript jest zniechęcone na etapie produkcji, ponieważ będzie miało poważny wpływ na wydajność strony.

Zawsze należy wcześniej skompilować składnię LESS i tylko serwuj regularne CSS zamiast. Możesz użyć Terminal, podobny do Runnera zadań Chrząknięcie lub Łyk, lub aplikacja graficzna, aby to zrobić.

Korzystanie z CLI

LESS zapewnia natywny interfejs wiersza poleceń (CLI), lessc, który obsługuje kilka zadań poza skompilowaniem składni LESS. Korzystając z CLI, możemy wyszukiwać kody, kompresować pliki i tworzyć mapę źródłową. Polecenie jest oparte na Node.js, które skutecznie pozwala poleceniu działać w systemach Windows, OS X i Linux.

Upewnij się, że zainstalowano plik Node.js (w przeciwnym razie pobierz tutaj instalatora), a następnie zainstaluj LESS CLI za pośrednictwem NPM (Node Package Manager), używając następującej linii poleceń.

 npm install -g mniej

Teraz masz lessc do dyspozycji polecenie skompilowania MNIEJ do CSS:

 lessc style.less style.css

Korzystanie z Runnera zadań

Runner zadań to narzędzie, które automatyzuje zadania programistyczne i przepływy pracy. Zamiast uruchamiać lessc Polecenie za każdym razem, gdy chcielibyśmy skompilować nasze kody, możemy zainstalować instalator zadań i ustawić go do oglądania zmian w naszych plikach LESS i natychmiastowego kompilowania LESS w CSS.

Dwa popularne dziś narzędzia w tej kategorii to Grunt i Gulp. Mamy serię postów, które obejmują te narzędzia. Sprawdź posty, aby dowiedzieć się, jak wdrożyć te narzędzia w przepływie pracy.

Jak używać Grunt do automatyzacji pracy
Pierwsze kroki z Gulp.js
The Battle Of Build Scripts: Gulp Vs Grunt

Korzystanie z aplikacji graficznej

Dla tych, którzy mogą nie być przyzwyczajeni do korzystania z Terminalu i linii poleceń, mogą wybrać interfejs graficzny. Istnieje wiele aplikacji do skompilowania MNIEJ dzisiaj dla wszystkich platform - niektóre są bezpłatne, niektóre płatne

Oto pełna lista:

App	Platforma	Koszt
Mieszanina	OS X / Windows	Darmowy
Koala	OS X / Windows / Linux	Darmowy
Prepros	OS X / Windows	Freemium (29 USD)
WinLESS	Windows	Darmowy
CodeKit	OS X	USD32

Który kompilator, na który zdecydujesz się (oprócz JavaScript), nie ma większego znaczenia, szczerze mówiąc, dopóki narzędzie działa i uzupełnia twój przepływ pracy, przejdź do tego.

Edytor kodu

Możesz użyć dowolnego edytora kodu. Wystarczy zainstalować wtyczkę lub rozszerzenie, aby wyróżnić składnię LESS z odpowiednimi kolorami, która jest teraz dostępna dla prawie wszystkich edytorów kodu i IDE, w tym SublimeText, Notepad ++, VisualStudio, TextMate i Eclipse, aby wymienić tylko kilka.

Teraz, gdy mamy już kompilator i edytor kodu, możemy zacząć pisać style CSS ze składnią LESS.

LESS Składnia

W przeciwieństwie do zwykłego CSS, jaki znamy, LESS działa znacznie bardziej jak język programowania. Jest dynamiczny, więc spodziewaj się takich terminologii Zmienne, Operacja i Zakres po drodze.

Zmienne

Po pierwsze, spójrzmy na Zmienne.

Jeśli pracowałeś dość długo z CSS, prawdopodobnie napisałeś coś takiego, gdzie mamy powtarzalne wartości przypisane w blokach deklaracji w całym arkuszu stylów.

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; kolor: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

Ta praktyka jest w porządku - dopóki nie będziemy musieli przesiewać więcej niż tysiąc lub więcej podobnych fragmentów w całym arkuszu stylów. Może się to zdarzyć podczas budowania dużej witryny. Praca stanie się nużąca.

Jeśli korzystamy z preprocesora CSS, takiego jak LESS, powyższa instancja nie byłaby problemem - możemy użyć Zmienne. Zmienne pozwolą nam przechowywać stała wartość, którą później można ponownie wykorzystać w całym arkuszu stylów.

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; kolor: @ kolor-podstawa;  .class3 border: 1px solid @ color-base;

W powyższym przykładzie przechowujemy kolor # 2d5e8b w @ baza kolorów zmienna. Jeśli chcesz zmienić kolor, musimy tylko zmienić wartość w tej zmiennej.

Oprócz koloru, możesz także umieścić inne wartości w zmiennych takich jak na przykład:

 @ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5

Mieszanki

W LESS możemy użyć Mieszanki do ponownego wykorzystania całych deklaracji w regule CSS ustawionej w innym zestawie reguł. Oto przykład:

 .gradienty tło: #eaeae; tło: gradient liniowy (góra, #eaeaea, #cccccc); tło: -o-liniowy-gradient (góra, #eaeaea, #cccccc); tło: -ms-linear-gradient (top, #eaeaea, #cccccc); tło: -moz-linear-gradient (góra, #eaeaea, #cccccc); background: -webkit-linear-gradient (top, #eaeaea, #cccccc);

W powyższym fragmencie mamy ustawione domyślne gradient kolor wewnątrz .gradienty klasa. Ilekroć chcemy dodać gradienty, po prostu wstawiamy .gradienty tą drogą:

 div .gradients; granica: 1px bryła # 555; border-radius: 3px;

The .pudełko odziedziczy cały blok deklaracji wewnątrz .gradienty. Tak więc powyższa reguła CSS jest równa poniższemu zwykłemu CSS:

 div tło: #eaeae; tło: gradient liniowy (góra, #eaeaea, #cccccc); tło: -o-liniowy-gradient (góra, #eaeaea, #cccccc); tło: -ms-linear-gradient (top, #eaeaea, #cccccc); tło: -moz-linear-gradient (góra, #eaeaea, #cccccc); background: -webkit-linear-gradient (top, #eaeaea, #cccccc); granica: 1px bryła # 555; border-radius: 3px;

Ponadto, jeśli dużo używasz CSS3 w swojej witrynie, możesz użyć LESS Elements, aby ułatwić Ci pracę. MNIEJSZE elementy to zbiór wspólnych CSS3 Mixins które możemy często używać w arkuszach stylów, takich jak promień graniczny, gradienty, drop-shadow i tak dalej.

Aby użyć LESS Elements, po prostu dodaj @import rządzić w arkuszu stylów LESS, ale nie zapomnij go najpierw pobrać i dodać do katalogu roboczego.

 @import „elements.less”;

Możemy teraz ponownie wykorzystać wszystkie klasy dostarczone z elements.less, na przykład, aby dodać 3px promień granicy do a div, możemy pisać:

 div .rounded (3px);

Dalsze informacje można znaleźć w oficjalnej dokumentacji.

Zagnieżdżone reguły

Kiedy piszesz style w zwykłym CSS, możesz również przejść przez te typowe struktury kodu.

 nav height: 40px; szerokość: 100%; tło: # 455868; border-bottom: 2px solid # 283744;  nav li width: 600px; wysokość: 40px;  nav li a color: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744;

W zwykłym CSS, wybieramy elementy potomne, najpierw kierując do rodzica w każdym zestawie reguł, który jest znacznie zbędny, jeśli postępujemy zgodnie z “najlepsze praktyki” zasada.

W LESS CSS możemy uprościć zestawy reguł przez zagnieżdżanie elementów potomnych wewnątrz rodziców, następująco;

 nav height: 40px; szerokość: 100%; tło: # 455868; border-bottom: 2px solid # 283744; li szerokość: 600px; wysokość: 40px; a color: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744;

Możesz także przypisać pseudoklasy, lubić :wahać się, do selektora za pomocą symbolu ampersand (&).

Powiedzmy, że chcemy dodać :wahać się do znacznika kotwicy powyżej możemy napisać w ten sposób:

 a color: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744; &: hover background-color: # 000; kolor: #fff;

Operacja

Możemy również wykonywać operacje w LESS, takie jak dodawanie, odejmowanie, mnożenie i dzielenie do liczb, kolorów i zmiennych w arkuszu stylów.

Powiedzmy, że chcemy, aby element B był dwa razy wyższy niż element A. W takim przypadku możemy napisać to w ten sposób:

 @height: 100px .element-A wysokość: @ wysokość;  .element-B wysokość: @ wysokość * 2;

Jak widać powyżej, najpierw zapisujemy wartość w @wysokość zmienna, a następnie przypisz wartość do elementu A.

W elemencie B, zamiast samodzielnie obliczać wysokość, możemy pomnożyć wysokość przez 2 za pomocą operatora gwiazdki (*). Teraz, gdy zmieniamy wartość w @wysokość zmienna, element B zawsze będzie miał podwójną wysokość.

Sprawdź bardziej zaawansowane przykłady operacji w naszym poprzednim samouczku: Projektowanie paska nawigacji menu zręcznego.

Zakres

LESS stosuje Zakres koncepcja, w której zmienne będą dziedziczone najpierw z zakresu lokalnego, a gdy nie będzie dostępna lokalnie, przeszuka szerszy zakres.

 header @color: black; kolor tła: @color; nav @ color: blue; kolor tła: @color; a color: @color;

W powyższym przykładzie nagłówek ma czarny kolor tła, ale navkolor tła będzie niebieski ponieważ ma zmienną @color w lokalnym zasięgu, podczas gdy za będzie również miał kolor niebieski, który jest dziedziczony od jego najbliższego rodzica, nav.

Końcowa myśl

Ostatecznie mamy nadzieję, że ten post da ci podstawowe zrozumienie, w jaki sposób możemy lepiej napisać CSS przy użyciu LESS. Być może początkowo czujesz się trochę niezręcznie, ale gdy próbujesz tego częściej, z pewnością stanie się to znacznie łatwiejsze.

Oto kilka samouczków, które zachęcam do zapoznania się z dalszymi wskazówkami i praktykami, które mogą pomóc w podniesieniu umiejętności MNIEJSZOŚCI do następnego poziomu.

LESS CSS Tutorial: Projektowanie zręcznego paska nawigacji menu
Zrozumienie MNIEJ funkcji kolorów
3 Nowe funkcje LESS CSS, które powinieneś znać