Първи стъпки с Less.js

Разработването на уеб приложения ни води по много пътища, но всички тези пътища имат едно общо нещо: код HTML и код CSS, което ни дава много възможности да направим нашите приложения да изглеждат както искаме или както си представяме.
Това, което се случва сега, е, че тъй като всеки човек има своя начин на развитие, много пъти получените кодове са много обширни или донякъде объркани, това води до малко повлияване на поддръжката и производителността. Тук се появяват библиотеките и предварителните процесори, които ни помагат да напишем малко по-чист и по-ефективен код, като по този начин подпомагаме и работата в екип, тъй като много от тези библиотеки ни карат да пишем по-добър код.
По -малко.jsИме По -малко.js произхожда от комбинацията от думите CSS Leaner, нещо като CSS по-тънък или намален, което вече ни дава представа какво ще прави този предварително процесор, което е нищо повече от това да ни помогне да напишем по-малко CSS код, като по този начин подобрим четливостта и производителността на нашите приложения и уеб страници. Тя се основава на JavaScript така че можем да го използваме или от страна на клиента, въпреки че тази практика не се препоръчва за производство, или също от страна на сървъра благодарение на npm и Node.js, така че може да се превърне в приставка за някои JavaScript рамка че шофираме в момента.
Основната идея да се приеме По -малко.js в нашата среда за развитие, е да помогнем за постигане на принципа СУХ, което означава да не се повтаряме и да постигнем това По -малко.js включва функции, класове и променливи, които ни позволяват да напишем много по -многократно използваем код от това, което бихме написали в CSS директно.
1- Нуждаем се от модерен браузър, който може да интерпретира примерите, с които ще се справим, може да бъде Google Chrome или Firefox Developer Edition.
2- Трябва да имаме текстов редактор в стила от Sublime Text или NotePad ++, за да можете да напишете нашите примери по -удобно.
3- Накрая се нуждаем от разрешения за инсталиране на елементи чрез командната конзола и интернет връзка за изтегляне на необходимите ресурси.
ИнсталацияИнсталирането на По -малко.js Това може да стане по два начина, първият директно на ниво клиент, а вторият в сървърна среда като напр Node.jsНека разгледаме всеки от тези начини по -долу.
Тази форма на инсталиране е толкова лесна, колкото просто извикване на файла, който съдържа библиотеката По -малко.js, и то просто вече е включено в нашата среда. За да изтеглите библиотеката, просто трябва да отидем на lesscss.org и да изтеглим най -новата стабилна версия.

Увеличете

След като имаме изтегления файл, можем да направим малък пример, който ще ни помогне да разберем дали нашата среда е готова за развитие с По -малко.js, затова трябва да извършим следните стъпки:
1- Ще създадем папка и вътре ще създадем файл, наречен index.html, тогава ще намерим файла less.min.js вътре в папката dist на версията на По -малко.js което сме изтеглили, освен това ще създадем файл, наречен стилове.не, структурата на това, което описахме, трябва да изглежда така, както виждаме по -долу:

2- Тогава ще напишем следния код по -долу в нашия index.html за да имаме нещо, което можем да приложим CSS и така проверете стиловете:

 Първи стъпки с Less.js Нашата заглавка Съдържанието Нашият долен колонтитул

Тук виждаме преди всичко структура HTML основен, където в рамките на тяло сме поставили етикет заглавка, етикет раздел и накрая етикет долен колонтитул, това ни дава три напълно различни елемента, към които можем да приложим стилове CSS.
3- Сега вътре в етикета глава от предишния код ще включим нашия файл стилове.не и след това включване на файла less.js, на този етап е много важно да се подчертае това less.js тя винаги ще бъде включена след нашите файлове .по-малко че стиловете ще носят, а също така е важно да се отбележи, че файловете .по-малко който включваме, трябва да има атрибута отн както следва: rel = "таблица със стилове / по -малко" тъй като без това компилаторът по-малко те няма да знаят, че трябва да работят с този файл. Нека да видим как ще изглежда нашият таг head с допълнителния код за добавяне към кода от предишната стъпка:

 Първи стъпки с Less.js 

4- Сега просто трябва да добавим някои стилове CSS вътре във файла стилове.не, кодът по -долу какво ще направи е да различава различните етикети, които създаваме с различни цветове:

 заглавка {цвят: син;} раздел {цвят: сив;} долен колонтитул {цвят: жълт;}

5- Ако отворим нашите index.html с браузър ще видим как стилът се е променил и ако отворим конзола за програмисти ще видим съобщенията, които отпечатва less.js За да ни уведомите, че работи, нека видим на следващото изображение как изглежда:

Можем дори да направим малко по-задълбочено упражнение и можем да отворим изходния код на нашия пример в браузъра и да видим как less.js генерира код CSS в нашия документ, който не включваме:

От страна на сървъраИнсталацията от страна на клиента е много полезна, когато се разработваме, тъй като ни позволява да направим един вид отстраняване на грешки в реално време, като по този начин наблюдаваме промените в момента, но за производствена среда изобщо не се препоръчва, на първо място губим време, докато По -малко.js генерира стиловите таблици и второ, защото качваме нашите файлове .по-малко които могат да бъдат копирани от други хора. Ето защо сега ще видим как да работим По -малко.js когато инсталираме вашия компилатор, за това ще използваме мениджъра на пакети npm.
Трябва да имаме пример за функционални npm, затова препоръчваме да инсталирате най -новата версия на Node.js за нашата операционна система.
Нуждаем се и от достатъчно разрешения, за да можем да инсталираме пакети с npm, и за изпълнение на инструкции на ниво конзолна конзола, това е много важно, особено в среди Linux Y Mac, така че в Windows разрешенията са по -лесни за обработка на това ниво.
1- От командната конзола трябва да изпълним следната инструкция с npm:

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

2- Предишната стъпка ни накара да инсталираме компилатора По -малко.js, Наречен по -малкоc, това, което прави, е, че трансформира нашия код по-малко в валиден CSS код за използване в браузър, така че ще го тестваме, за това ще създадем файл, наречен пример.без със следния код вътре:

 @цвят: син; .highlight () {цвят: @color;} p {.highlight ();}

3- След като горното е направено, отиваме в нашата конзола и изпълняваме следната инструкция за генериране на файл .css където ще почива компилираният ни код:

 lessc example.less> example.css

В получения файл ще получим това, което виждаме на следното изображение:

Ако искаме компресиран резултат или минимизиран просто добавете -x параметър след обаждане по -малкоc като следното:

 lessc -x example.less> example.css

Какво ни дава следното минимизиран css като резултат:

В последния пример за инсталации според начина на използване видяхме, че за да поставите цвета на обикновен етикет стр правим няколко неща, първо определяме цветова променлива с @ модификатор, това означава, че можем да извикваме цветове или стойности в рамките на променливи в целия ни документ, така че можем да имаме променлива @colorTitle и с това знаем, че навсякъде, където искаме да използваме заглавния цвят, правим само това обаждане.
Процедури за многократна употребаДруго, което видяхме, беше, че създадохме функция, наречена .highlight () и вътре поставяме атрибут CSS и стойността му беше нашата променлива, това е още един пример за това как можем да изградим рутини за многократна употреба в нашите стилове, така че във всеки клас или атрибут, който искаме да подчертаем нещо, просто трябва да извикаме тази функция, както направихме вътре в елемента p в пример.
Така виждаме, че значението на По -малко.js е, че ни помага да мислим повече за това как да направим по-малко и по този начин да получим компресиран, валиден и лесен за четене код в края, в примера можеше да се каже, че много е написано за толкова малко CSS в резултат на това, но идеята е, че когато трябва да правим много CSS, пишем по -малко, така че виждаме това По -малко.js оказва се, когато правим големи стилове.
С това завършваме този урок, научихме се да правим първите си стъпки По -малко.js, така че сега имаме добри инструменти, за да можем да създаваме страхотни приложения или уеб страници, използвайки възможно най -малкото количество код.