Први кораци са Лесс.јс

Развој веб апликација води нас низ путеве, али сви ти путеви имају једну заједничку ствар: код ХТМЛ и код ЦСС, што нам даје многе могућности да наше апликације изгледају онако како желимо или како замишљамо.
Оно што се сада дешава је да, будући да свака особа има свој начин развоја, много пута су резултирајући кодови врло опсежни или помало неуредни, што узрокује да то мало утиче на одржавање и перформансе. Овде долазе библиотеке и предпроцесори који нам помажу да напишемо мало чистији и ефикаснији код, помажући тако и тимском раду, будући да нас многе од ових библиотека терају да напишемо бољи код.
Лесс.јсИме Лесс.јс потиче од комбинације речи ЦСС Леанер, нешто слично ЦСС тањи или смањени, што нам већ даје идеју о томе шта ће овај предпроцесор радити, што није ништа друго него помоћ у писању мање ЦСС кода, побољшавајући тако читљивост и перформансе наших апликација и веб страница. Заснован је на ЈаваСцрипт тако да га можемо користити или на страни клијента, иако се ова пракса не препоручује за производњу, нити са стране сервера захваљујући нпм и Ноде.јс, па може постати додатак за неке ЈаваСцрипт фрамеворк којим се тренутно возимо.
Главна идеја коју треба усвојити Лесс.јс у нашем развојном окружењу, је да помогнемо у испуњавању принципа СУВ, што значи да се не понављамо и да то постигнемо Лесс.јс садржи функције, класе и променљиве које нам омогућавају да напишемо много више кода за вишекратну употребу од оног у чему бисмо писали ЦСС директно.
1- Потребан нам је модеран прегледач који може да тумачи примере са којима ћемо се бавити, може бити Гоогле Цхроме или Фирефок Девелопер Едитион.
2- Морамо имати уређивач текста у стилу би Сублиме Тект или НотеПад ++ да бисте могли удобније да пишете наше примере.
3- Коначно су нам потребне дозволе за инсталирање елемената путем командне конзоле и интернетске везе за преузимање потребних ресурса.
ИнсталацијаИнсталација Лесс.јс То се може урадити на два начина, први директно на нивоу клијента, а други у серверском окружењу као што је Ноде.јсПогледајмо сваки од ових начина у наставку.
Овај облик инсталације је једноставан као и једноставно позивање датотеке која садржи библиотеку Лесс.јс, и једноставно је већ укључено у наше окружење. Да бисмо преузели библиотеку, морамо само отићи на лессцсс.орг и преузети најновију стабилну верзију.

ЕНЛАРГЕ

Када преузмемо преузету датотеку, можемо направити мали пример који ће нам помоћи да сазнамо имамо ли наше окружење спремно за развој Лесс.јс, зато морамо извршити следеће кораке:
1- Креираћемо фасциклу, а унутра ћемо направити датотеку под називом индек.хтмл, тада ћемо пронаћи датотеку лесс.мин.јс унутар фасцикле дист верзије Лесс.јс коју смо преузели, додатно ћемо креирати датотеку под називом стилова.нема, структура онога што смо описали треба да изгледа овако како видимо доле:

2- Онда ћемо испод унети следећи код у наш индек.хтмл тако да имамо нешто што можемо применити ЦСС па проверите стилове:

 Први кораци са Лесс.јс Наш заглавље Садржај Наше подножје

Овде пре свега видимо структуру ХТМЛ основно, где у оквиру тело поставили смо етикету заглавље, ознака одељак и на крају етикету подножје, ово нам даје три потпуно различита елемента на која можемо применити стилове ЦСС.
3- Сада унутар етикете глава из претходног кода ћемо уградити нашу датотеку стилова.нема а након овог укључивања датотека лесс.јс, у овом тренутку је веома важно то нагласити лесс.јс увек ће бити укључено после наших датотека .мање да ће стилови носити, а такође је важно напоменути да датотеке .мање које укључујемо мора имати атрибут рел као што следи: рел = "стилски лист / мање" пошто је без овога компајлер мање неће знати да морају да раде са том датотеком. Да видимо како ће изгледати наша ознака хеад са додатним кодом за додавање коду из претходног корака:

 Први кораци са Лесс.јс 

4- Сада морамо само да додамо неке стилове ЦСС унутар датотеке стилова.нема, код испод онога што ће учинити је разликовање различитих ознака које стварамо различитим бојама:

 заглавље {боја: плаво;} одељак {боја: сиво;} подножје {боја: жуто;}

5- Ако отворимо наш индек.хтмл са прегледачем ћемо видети како се стил променио, а ако отворимо конзолу за програмере видећемо поруке које штампа лесс.јс Да бисте нас обавестили да ради, погледајмо на следећој слици како то изгледа:

Можемо чак и мало дубље вежбати и можемо отворити изворни код нашег примера у прегледачу и видети како лесс.јс генерисао код ЦСС у наш документ који не укључује:

На страни сервераИнсталација на страни клијента је веома корисна када развијамо, јер нам омогућава да урадимо неку врсту отклањање грешака у реалном времену, посматрајући тако тренутне промене, међутим за производно окружење то се уопште не препоручује, на првом месту губимо време док Лесс.јс генерише стилске листове, и друго зато што учитавамо наше датотеке .мање то могу копирати други људи. Зато ћемо сада видети како да радимо Лесс.јс приликом инсталирања вашег компајлера, за то ћемо користити менаџер пакета нпм.
Морамо имати пример функционални нпм, зато препоручујемо инсталирање најновије верзије Ноде.јс за наш оперативни систем.
Такође су нам потребне довољне дозволе за инсталирање пакета нпм, и за извршавање инструкција на нивоу командне конзоле, ово је веома важно посебно у окружењима Линук И Мац, тако да у Виндовс дозволе се лакше обрађују на овом нивоу.
1- Са командне конзоле морамо извршити следеће упутство помоћу нпм:

 нпм инсталл -г мање

2- Претходни корак нас је натерао да инсталирамо компајлер Лесс.јс, звао лессц, ово што ради је да трансформише наш код мање у важећем ЦСС коду за употребу у прегледачу, па ћемо га тестирати, за ово ћемо направити датотеку под називом пример.нема са следећим кодом унутра:

 @боја: плава; .хигхлигхт () {цолор: @цолор;} п {.хигхлигхт ();}

3- Када се горе наведено уради, идемо на нашу конзолу и извршавамо следеће упутство за генерисање датотеке .цсс где ће почивати наш компајлирани код:

 лессц екампле.лесс> екампле.цсс

У добијеној датотеци ћемо добити оно што видимо на следећој слици:

Ако желимо компримовани резултат или умањено само додајте -к параметар након позива лессц попут следећег:

 лессц -к екампле.лесс> екампле.цсс

Оно што нам даје следеће минифиед цсс као резултат:

У посљедњем примјеру инсталација према начину употребе видјели смо да се боја ставља на једноставну наљепницу п радимо неколико ствари, прво дефинишемо променљиву боје са @ модификатор, то значи да можемо позвати боје или вредности унутар променљивих у целом нашем документу, тако да можемо имати променљиву @цолорТитле и са овим знамо да свуда где желимо да користимо насловну боју позивамо само тај позив.
Рутине за вишекратну употребуЈош једна ствар коју смо видели је да смо креирали функцију која се зове .хигхлигхт () а унутра постављамо атрибут ЦСС и његова вредност је била наша променљива, ово је још један пример како можемо да изградимо рутине за вишекратну употребу унутар наших стилова, тако да у било којој класи или атрибуту који желимо да истакнемо нешто морамо само да позовемо ту функцију као што смо то учинили унутар елемента п у пример.
Тако видимо да је важност Лесс.јс је то што нам помаже да више размишљамо о томе како да учинимо мање, па тако резултирамо компримованим, ваљаним и лако читљивим кодом на крају, у примеру се могло рећи да је много написано за тако мало ЦСС резултирало, али идеја је да када морамо да радимо много ЦСС -а, пишемо мање, па то видимо Лесс.јс испоставља се када правимо велике стилове.
Овим смо завршили овај водич, научили смо да чинимо прве кораке Лесс.јс, тако да сада имамо добре алате за израду одличних апликација или веб страница користећи најмању могућу количину кода.