ЛЕСС ЦСС - Водич за почетнике
ЦСС Пре-процесор је сада постао главни производ у веб развоју. Он испоручује обичан ЦСС са особинама програмирања као што су варијабле, функције или микин и операције које дозвољавају веб програмерима да граде модуларни, скалабилни и више управљиви ЦСС стилови.
У овом посту, погледаћемо ЛЕСС који је био један од најпопуларнијих ЦСС Пре-процесора, а такође је био широко примењен у бројним фронт-енд оквирима као што је Боотстрап. Такође ћемо проћи кроз основни услужни програми, алати и подешавања који ће вам помоћи да се покренете са ЛЕСС.
Тхе Цомпилер
За почетак, морат ћемо поставити компајлер. ЛЕСС синтакса је нестандардна по В3Ц спецификацији. Претраживач не би могао да обради и рендерује излаз, упркос наслеђивању особина сличних ЦСС-у.
Ево кратког приказа ЛЕСС кода:
@ цолор-басе: # 2д5е8б; .цласс1 бацкгроунд-цолор: @ цолор-басе; .цласс2 бацкгроунд-цолор: #ффф; боја: @ цолор-басе;
Компајлер ће обрадити код и претворити ЛЕСС синтаксу у ЦСС формат усклађен са прегледачем:
.цласс1 бацкгроунд-цолор: # 2д5е8б; .цласс1 .цласс2 бацкгроунд-цолор: #ффф; цолор: # 2д5е8б;
Постоји велики број алата за компајлирање ЦСС-а:
Коришћење ЈаваСцрипт-а
МАЊЕ долази са лесс.јс датотеку која је веома једноставна за имплементацију на вашем веб сајту. Креирајте стилску таблицу са .мање и повежите га у документ користећи рел = "стилесхеет / лесс" аттрибуте.
Овде можете добити ЈС фајл, преузети га преко Бовер менаџер пакета, иначе директно повезати на ЦДН, на пример:
Сви сте постављени и можете саставити стилове унутар .мање. ЛЕСС синтакса ће бити компајлирана у лету док се страница учитава. Имајте на уму то коришћење ЈаваСцрипт-а је обесхрабрено у фази производње, јер ће то лоше утицати на перформансе сајта.
Увек морате компајлирати ЛЕСС синтаксу служи редован ЦСС уместо тога. Можете користити Терминал, Тендер Руннер лике Грунт или Гулп, или графичка апликација за то.
Коришћење ЦЛИ
ЛЕСС пружа изворни интерфејс командне линије (ЦЛИ), лессц, која обрађује неколико задатака изван само компајлирања ЛЕСС синтаксе. Користећи ЦЛИ можемо линтати кодове, компримовати датотеке и креирати изворну мапу. Команда се заснива на Ноде.јс која ефективно дозвољава команди да ради у Виндовсима, ОС Кс и Линуку.
Проверите да ли је инсталиран Ноде.јс (иначе преузмите инсталациони програм овде), а затим инсталирајте ЛЕСС ЦЛИ кроз НПМ (Ноде Пацкаге Манагер) користећи следећу командну линију.
нпм инсталл -г лесс
Сада имате лессц наредите на располагању да компајлирате ЛЕСС у ЦСС:
лессц стиле.лесс стиле.цсс
Коришћење Руннера задатака
Таск руннер је алат који аутоматизује развојне задатке и радне процесе. Уместо да покренете лессц наредите сваки пут када бисмо хтели да саставимо наше кодове, можемо да инсталирамо руннер задатака, и да га подесимо да гледа промене унутар наших ЛЕСС датотека, и одмах компајлира ЛЕСС у ЦСС.
Два популарна алата у овој категорији данас су Грунт и Гулп. Имамо низ постова који покривају ове алате. Проверите постове да бисте сазнали како да примените ове алате у свом радном процесу.
- Како користити Грунт да бисте аутоматизовали ваш радни процес
- Почетак рада са Гулп.јс
- Тхе Баттле Оф Буилд Сцриптс: Гулп Вс Грунт
Коришћење графичке апликације
За оне који можда нису навикли да користе терминале и командне линије, могу се одлучити за графички интерфејс. Постоји мноштво апликација за компајлирање ЛЕСС-а данас за све платформе - неке бесплатне, неке плаћене
Ево комплетне листе:
| Апликација | Платформа | Цост |
| Мешавина | ОС Кс / Виндовс | бесплатно |
| Коала | ОС Кс / Виндовс / Линук | бесплатно |
| Препрос | ОС Кс / Виндовс | Фреемиум (УСД29) |
| ВинЛЕСС | Виндовс | бесплатно |
| ЦодеКит | ОС Кс | УСД32 |
Који компајлер за који се одлучите (осим ЈаваСцрипт-а) није битно, искрено, све док алат ради и допуњује ваш радни процес, идите на то.
Уређивач кода
Можете користити било који уређивач кода. Једноставно инсталирајте додатак или проширење да бисте истакли ЛЕСС синтаксу са одговарајућим бојама, што је функција која је сада доступна за скоро све уређиваче кода и ИДЕ-ове, укључујући СублимеТект, Нотепад ++, ВисуалСтудио, ТектМате и Ецлипсе..
Сада када смо поставили компајлер и уређивач кода, можемо почети писати ЦСС стилове са ЛЕСС синтаксом.
ЛЕСС Синтак
За разлику од обичног ЦСС-а каквог познајемо, ЛЕСС ради много више као програмски језик. То је динамично, па очекујте да нађете неке терминологије Променљиве, Операција и Обим успут.
Променљиве
Пре свега, хајде да погледамо Променљиве.
Ако сте радили прилично дуго са ЦСС-ом, вероватно сте написали нешто слично овоме, где имамо репетитивне вредности које су додељене у блоковима декларације у целој стилској табели..
.цласс1 бацкгроунд-цолор: # 2д5е8б; .цласс2 бацкгроунд-цолор: #ффф; цолор: # 2д5е8б; .цласс3 бордер: 1пк солид # 2д5е8б;
Ова пракса је заиста добра - док не нађемо да морамо да пролазимо кроз више од тога хиљаду или више сличних исечка кроз стилски лист. То би се могло догодити приликом изградње веб странице великих размјера. Рад ће постати досадан.
Ако користимо ЦСС пре-процесор као ЛЕСС, горенаведена инстанца неће бити проблем - можемо користити Променљиве. Варијабле ће нам омогућити складиштење константа вредност која се касније може поново користити у целој табели стилова.
@ цолор-басе: # 2д5е8б; .цласс1 бацкгроунд-цолор: @ цолор-басе; .цласс2 бацкгроунд-цолор: #ффф; боја: @ цолор-басе; .цласс3 бордер: 1пк солид @ цолор-басе;
У горе наведеном примеру чувамо боју # 2д5е8б у @ цолор-басе променљива. Када желите да промените боју, потребно је само да промените вредност у овој променљивој.
Осим боје, у варијабле можете поставити и друге вриједности као што је на примјер:
@ фонт-фамили: Георгиа @ дот-бордер: доттед @транситион: линеар @опацити: 0.5
Микинс
У МАЊЕМ можемо користити Микинс да поново користи целокупне декларације у ЦСС скупу правила у другом скупу правила. Ево примера:
.градијенти бацкгроунд: #еаеаеа; бацкгроунд: линеарно-градијент (топ, #еаеаеа, #цццццц); бацкгроунд: -о-линеарни градијент (топ, #еаеаеа, #цццццц); бацкгроунд: -мс-линеар-градиент (топ, #еаеаеа, #цццццц); бацкгроунд: -моз-линеар-градиент (топ, #еаеаеа, #цццццц); бацкгроунд: -вебкит-линеар-градиент (топ, #еаеаеа, #цццццц);
У горњем исечку имамо унапред подешену подразумевану вредност градиент боја унутар .градијенти класа. Кад год желимо додати градијенте једноставно убацимо .градијенти овуда:
див .градиентс; бордер: 1пк солид # 555; бордер-радиус: 3пк;
Тхе .бок ће наследити све блокове за декларацију унутар .градијенти. Дакле, горе наведено ЦСС правило је једнако следећем обичном ЦСС-у:
див бацкгроунд: #еаеаеа; бацкгроунд: линеарно-градијент (топ, #еаеаеа, #цццццц); бацкгроунд: -о-линеарни градијент (топ, #еаеаеа, #цццццц); бацкгроунд: -мс-линеар-градиент (топ, #еаеаеа, #цццццц); бацкгроунд: -моз-линеар-градиент (топ, #еаеаеа, #цццццц); бацкгроунд: -вебкит-линеар-градиент (топ, #еаеаеа, #цццццц); бордер: 1пк солид # 555; бордер-радиус: 3пк;
Осим тога, ако много користите ЦСС3 на свом веб сајту, можете користити ЛЕСС Елементе да би ваш посао био много лакши. ЛЕСС Елементс је скуп уобичајених ЦСС3 Микинс које често користимо у стилским листовима, као што је бордер-радиус, градијенти, дроп-схадов и тако даље.
Да бисте користили ЛЕСС елементе, једноставно додајте @увоз правило у ЛЕСС стилесхеет-у, али не заборавите да га прво преузмете и додате у ваш радни директоријум.
@импорт "елементс.лесс";
Сада можемо поново користити све класе обезбеђен од стране елементс.лесс, на пример, да додате 3пк радијус до а див, можемо писати:
див .роундед (3пк);
За даљу употребу, молимо погледајте званичну документацију.
Нестед Рулес
Када пишете стилове у обичном ЦСС-у, можда сте прошли и кроз ове типичне структуре кода.
нав хеигхт: 40пк; ширина: 100%; позадина: # 455868; бордер-боттом: 2пк солид # 283744; нав ли ширина: 600пк; хеигхт: 40пк; нав ли а цолор: #ффф; висина линије: 40пк; текст-сенка: 1пк 1пк 0пк # 283744;
У обичном ЦСС-у, бирамо подређене елементе тако што ћемо прво циљати родитеља у сваком скупу правила, што је знатно сувишно ако пратимо “најбоље праксе” принцип.
У ЛЕСС ЦСС, можемо поједноставити скуп правила гнијеждење дјечјих елемената унутар родитеља, као што следи;
нав хеигхт: 40пк; ширина: 100%; позадина: # 455868; бордер-боттом: 2пк солид # 283744; ли ширина: 600пк; хеигхт: 40пк; а цолор: #ффф; висина линије: 40пк; текст-сенка: 1пк 1пк 0пк # 283744;
Такође можете да доделите псеудо-класе, као :лебдети, на селектор помоћу симбола (&).
Рецимо да желимо додати :лебдети на ознаку сидра изнад, можемо је написати на овај начин:
а цолор: #ффф; висина линије: 40пк; текст-сенка: 1пк 1пк 0пк # 283744; &: ховер бацкгроунд-цолор: # 000; цолор: #ффф;
Операција
Такође, можемо обављати операције у МАЊИМА, као што је збрајање, одузимање, множење и дељење на бројеве, боје и варијабле у стилу.
Рецимо да желимо да је елемент Б два пута већи од елемента А. У том случају, можемо га написати на овај начин:
@хеигхт: 100пк .елемент-А хеигхт: @хеигхт; .елемент-Б хеигхт: @хеигхт * 2;
Као што можете видети горе, прво чувамо вредност у @хеигхт варијаблу, затим доделите вредност елементу А.
У елементу Б, уместо да сами израчунамо висину, можемо помножити висину са 2 помоћу оператора звездица (*). Сада, кад год променимо вредност у @хеигхт променљива, елемент Б увек ће имати двоструку висину.
Погледајте напредније примере рада у нашем претходном упутству: Пројектовање траке за навигацију менија.
Обим
МАЊЕ примјењује Обим Концепт, где ће варијабле бити наслеђене прво из локалног опсега, а када није доступан локално, он ће претраживати шири опсег.
хеадер @цолор: блацк; бацкгроунд-цолор: @цолор; нав @цолор: блуе; бацкгроунд-цолор: @цолор; а боја: @цолор;
У горњем примеру, хеадер има црн позадинска боја, али навБоја позадине ће бити Плави јер има променљиву @цолор у свом локалном опсегу, док је а такође ће имати плаво које је наслеђено од свог ближег родитеља, нав.
Финал Тхоугхт
На крају, надамо се да вам овај пост може дати основно разумијевање о томе како можемо написати ЦСС на бољи начин користећи ЛЕСС. Можда се у почетку осјећате помало неспретно, али док га чешће испробавате, сигурно ће вам бити много лакше.
Ево неколико туторијала које вас охрабрујем да потражите додатне савете и праксе, који могу да вам помогну да подигнете своју ЛЕСС вештину на следећи ниво.
- ЛЕСС ЦСС Туториал: Дизајн Слицк Мену Навигатион Бар
- Разумевање функција боје ЛЕСС
- 3 НОВЕ МАЊЕ ЦСС могућности које требате знати
