LESS CSS - Ръководство за начинаещи

CSS Pre-processor вече се превърна в основна част от уеб разработките. Тя доставя обикновен CSS с черти на програмиране като променливи, функции или mixin и операция, която позволява на уеб разработчиците да изграждат модулни, мащабируеми и по-управляеми CSS стилове.

В този пост ще разгледаме LESS, който е един от най-популярните CSS Pre-processors наоколо, и е широко разпространен в множество фронт-енд рамки като Bootstrap. Ще преминем и през основни помощни програми, инструменти и настройки, които да ви помогнат да се справите с LESS.

Компилаторът

Първо, ще трябва да настроим компилатор. LESS синтаксис е нестандартен, за W3C спецификация. Браузърът няма да може да обработва и визуализира изхода, въпреки наследяващи черти, подобни на CSS.

Ето един поглед към LESS кода:

 @ color-base: # 2d5e8b; .class1 цвят на фона: @ color-base; .class2 фон-цвят: #fff; цвят: @ цвят-основа;

Компилаторът ще обработи кода и ще превърне LESS синтаксиса в CSS формат, съвместим с браузъра:

 .class1 фонов цвят: # 2d5e8b;  .class1 .class2 фон-цвят: #fff; цвят: # 2d5e8b;

Съществуват редица инструменти за компилиране на CSS:

Използване на JavaScript

LESS идва с a less.js файл, който е много лесен за разгръщане във вашия уебсайт. Създайте таблица със стилове .по-малко разширение и го свържете в документа с помощта на отн = "стилове / по-малко" атрибут.

Можете да получите JS файла тук, да го изтеглите чрез мениджъра на пакети Bower, иначе директно да се свържете с CDN, така:

Вие всички сте настроени и можете да съставяте стилове в .по-малко. Синтаксисът LESS ще бъде компилиран в движение, когато страницата се зарежда. Имайте предвид, че използването на JavaScript е обезкуражено в производствената фаза, тъй като ще повлияе зле на представянето на сайта.

Винаги трябва да компилирате LESS синтаксиса предварително и само служат за редовен CSS вместо. Можеш да използваш терминал, Подобно на бегач със задачи грухтене или глътка, или графично приложение за това.

Използване на CLI

LESS осигурява оригинален интерфейс за командния ред (CLI), lessc, който обработва няколко задачи, освен просто съставяне на по-малък синтаксис. С помощта на CLI можем да вмъкнем кодовете, да компресираме файловете и да създадем изходна карта. Командата се основава на Node.js, която ефективно позволява на командата да работи в Windows, OS X и Linux.

Уверете се, че Node.js е инсталиран (в противен случай вземете инсталатора тук), след това инсталирайте LESS CLI чрез NPM (Node Package Manager) като използвате следния команден ред:.

 npm инсталирате -g по-малко

Сега имате lessc на разположение, за да компилирате LESS в CSS:

 lessc style.less style.css

Използване на изпълнител на задачи

Ръководителят на задачи е инструмент, който автоматизира задачите за разработка и работните потоци. Вместо да стартирате lessc всеки път, когато искаме да компилираме нашите кодове, можем да инсталираме бегач на задачи и да го настроим да наблюдава промените в по-малките ни файлове и незабавно да компилираме LESS в CSS.

Две популярни инструменти в тази категория днес са Grunt и Gulp. Имаме поредица от публикации, които покриват тези инструменти. Проверете съобщенията, за да научите как да разположите тези инструменти във вашия работен процес.

Как да използвате Grunt за автоматизиране на вашия работен процес
Първи стъпки с Gulp.js
Битката за строежа на скриптове: "Зал"

Използване на графично приложение

За тези, които може да не са свикнали да използват терминални и командни линии, те могат да изберат графичен интерфейс вместо това. Има изобилие от приложения за съставяне на МАЛКО днес за всички платформи - някои безплатни, някои платени

Ето пълния списък:

App	платформа	цена
смес	OS X / Windows	Безплатно
коала	OS X / Windows / Linux	Безплатно
Prepros	OS X / Windows	Freemium (USD29)
без победа	Windows	Безплатно
CodeKit	OS X	USD32

Кой компилатор, който избирате (освен JavaScript), няма значение, честно казано, стига инструментът да работи и да допълва работния ви процес, направете го.

Редактор на кодове

Можете да използвате всеки редактор на кодове. Просто инсталирайте плъгин или разширение, за да подчертаете LESS синтаксиса с подходящи цветове, функция, която вече е достъпна за почти всички редактори на кодове и IDE, включително SublimeText, Notepad ++, VisualStudio, TextMate и Eclipse..

Сега, когато всички компилатор и редактор на код са настроени, можем да започнем да пишем CSS стилове с LESS синтаксис.

По-малък синтаксис

За разлика от обикновените CSS, каквито го познаваме, LESS работи много повече като език за програмиране. Това е динамично, така че очаквайте да намерите някои терминологии като Променливи, операция и Обхват по пътя.

Променливи

Първо, нека да разгледаме Променливи.

Ако работите доста дълго с CSS, вероятно сте написали нещо подобно, където има повтарящи се стойности, зададени в блоковете на декларация в цялата таблица със стилове..

 .class1 фонов цвят: # 2d5e8b;  .class2 фон-цвят: #fff; цвят: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

Тази практика всъщност е добра - докато не се наложи да пресяваме повече от хиляда или повече подобни фрагменти в таблицата със стилове. Това може да се случи при изграждането на мащабен уебсайт. Работата ще стане досадна.

Ако използваме CSS pre-procesor като LESS, горепосоченият случай няма да бъде проблем - можем да използваме Променливи. Променливите ни позволяват да съхраняваме константа стойност, която по-късно може да бъде използвана отново в цялата таблица със стилове.

 @ color-base: # 2d5e8b; .class1 цвят на фона: @ color-base;  .class2 фон-цвят: #fff; цвят: @ цвят-основа;  .class3 border: 1px solid @ color-base;

В горния пример съхраняваме цвета # 2d5e8b в @ Цвят база променлива. Когато искате да промените цвета, трябва само да промените стойността в тази променлива.

Освен цветовете, можете да поставите и други стойности в променливите, като например:

 @ font-family: Georgia @ dot-border: пунктирана @ преход: линейна @opacity: 0.5

Mixins

В МАЛКО, можем да използваме Mixins да използваме цели декларации в CSS правило, зададено в друго правило. Ето един пример:

 .градиенти фон: #eaeaea; фон: линеен градиент (отгоре, #eaeaea, #cccccc); фон: -о-линеен градиент (отгоре, #eaeaea, #cccccc); фон: -ms-linear-gradient (отгоре, #eaeaea, #cccccc); фон: -moz-linear-gradient (отгоре, #eaeaea, #cccccc); фон: -webkit-linear-gradient (отгоре, #eaeaea, #cccccc);

В горния фрагмент сме задали предварително подразбиране градиент цвят вътре в. \ t .градиенти клас. Винаги, когато искаме да добавим градиентите, просто вмъкваме .градиенти насам:

 div .gradients; граница: 1px твърдо # 555; граничен радиус: 3px;

Най- .кутия ще наследи целия блок за деклариране вътре в .градиенти. Така че правилото за CSS по-горе е равно на следния обикновен CSS:

 div фон: #eaeaea; фон: линеен градиент (отгоре, #eaeaea, #cccccc); фон: -о-линеен градиент (отгоре, #eaeaea, #cccccc); фон: -ms-linear-gradient (отгоре, #eaeaea, #cccccc); фон: -moz-linear-gradient (отгоре, #eaeaea, #cccccc); фон: -webkit-linear-gradient (отгоре, #eaeaea, #cccccc); граница: 1px твърдо # 555; граничен радиус: 3px;

Освен това, ако използвате много CSS3 в уебсайта си, можете да използвате LESS Elements, за да направите работата си много по-лесна. LESS Elements е колекция от общи CSS3 Mixins които често можем да използваме в стилове, като например граничен радиус, градиенти, падащо сянка и така нататък.

За да използвате LESS Elements, просто добавете @import Правилото в LESS стиловете, но не забравяйте първо да го изтеглите и да го добавите в работната си директория.

 @import "elements.less";

Сега можем да използваме всички класове предоставена от elements.less, например, за да добавите 3px радиус до a Разделение, можем да пишем:

 div .rounded (3px);

За по-нататъшна употреба вижте официалната документация.

Вложени правила

Когато пишете стилове в обикновен CSS, може да сте преминали през тези типични кодови структури.

 nav височина: 40px; ширина: 100%; фон: # 455868; граница отдолу: 2px твърдо # 283744;  nav ли ширина: 600 пиксела; височина: 40px;  nv li a цвят: #fff; височина на линията: 40px; текстова сянка: 1px 1px 0px # 283744;

В обикновен CSS избираме дъщерни елементи, като първо насочваме родителя във всеки набор от правила, което е значително излишно, ако следваме “най-добри практики” принцип.

В LESS CSS можем да опростим правилата от гнездене на детските елементи в родителите, както следва;

 nav височина: 40px; ширина: 100%; фон: # 455868; граница отдолу: 2px твърдо # 283744; li ширина: 600 пиксела; височина: 40px; a цвят: #fff; височина на линията: 40px; текстова сянка: 1px 1px 0px # 283744;

Можете също да зададете псевдо-класовете, като : навъртам, към селектора, използвайки символа (&).

Да кажем, че искаме да добавим : навъртам към маркер за котва по-горе, можем да го напишем по следния начин:

 a цвят: #fff; височина на линията: 40px; текстова сянка: 1px 1px 0px # 283744; &: hover background-color: # 000; цвят: #fff;

операция

Също така можем да извършваме операции в LESS, като например събиране, изваждане, умножение и деление към числа, цветове и променливи в таблицата със стилове.

Да кажем, че искаме елемент Б да бъде два пъти по-висок от елемент А. В този случай можем да го напишем по следния начин:

 @height: 100px .element-A височина: @height;  .element-B височина: @height * 2;

Както можете да видите по-горе, първо съхраняваме стойността в @height променлива, след това задайте стойността на елемент А.

В елемент Б, вместо да изчисляваме височината, можем да умножим височината с 2 използвайки оператора звездичка (*). Сега, когато променяме стойността в @height променлив, елемент Б винаги ще има двойно височина.

Вижте по-съвременни примери за работа в предишния ни урок: Проектиране на лента за навигация в менюто.

Обхват

LESS прилага Обхват концепция, където променливите ще бъдат наследени първо от локалния обхват, а когато не е налична локално, ще търси в по-широк обхват.

 header @color: black; фон-цвят: @color; nav @color: син; фон-цвят: @color; a цвят: @ цвят;

В примера по-горе, удар с глава има черно цвят на фона, но навигацияЦветът на фона ще бъде син тъй като има променлива @color в неговия локален обхват, докато а също ще има синьо, което е наследено от по-близкия си родител, навигация.

Заключителна мисъл

Накрая, надяваме се, че този пост може да ви даде основно разбиране за това как можем да напишем CSS по-добър начин, използвайки LESS. Може би първоначално се чувствате малко неудобно, но докато го опитвате по-често, то със сигурност ще стане много по-лесно.

Ето няколко ръководства, които ви препоръчвам да разгледате за допълнителни съвети и практики, които могат да помогнат да накарате LESS уменията си до следващото ниво.

LESS CSS Tutorial: Проектиране на лента за навигация в менюто
Разбиране на функциите за цвят на по-малките
3 нови по-малко CSS функции, които трябва да знаете