Шта је мање ЦСС-а и како га користите?

Ако сте искусан ЦСС програмер, бићете свесни недостатака језика. Још увек му недостаје широко распрострањена подршка за дуго тражене функције као што су гнежђење и миксини.

Лесс (Леанер Стиле Схеетс) је проширење ЦСС-а са многим моћним функцијама. Ако знате ЦСС, онда је учење Лесса лако јер је Лессова синтакса веома слична.

Како инсталирати мање

Можете инсталирати Лесс помоћу ЈаваСцрипт менаџер пакета, НПМ покретањем:

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

Након инсталације, можете компајлирати .мање датотеке за .цсс помоћу лессц команда. На пример, следећа наредба се компајлира стил.мање и даје резултате у а стиле.цсс фајл.

лессц стиле.лесс стиле.цсс

Променљиве у Мање

за разлику од обичан ЦСС, који користи "--" оператор за дефинисање променљивих, Лесс дефинише променљиве помоћу симбола "@". На пример:

@видтх:40пк;
@висина:80пк;

Блок кода једноставно креира две променљиве, ширину и висину које садрже две вредности респективно: 40пк и 80пк. Уобичајена је пракса узимати уобичајене вредности у ЦСС-у и чувати их у променљивој. Ово олакшава измену тих вредности јер постоји само један извор контроле.

Ево како можете да користите променљиве у Лесс-у. Направите ан индек.хтм датотеку и додајте следећи шаблонски код:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8">
<метахттп-екуив="Кс-УА-Цомпатибле"садржаја=„ИЕ=ивица“>
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0">
<линкрел="стилесхеет"хреф="стиле.цсс">
<наслов>Коришћење мање ЦСС-анаслов>
глава>
<тело>
<див>
 Поздрав од деце планете Земље!
див>
тело>
хтмл>

Затим креирајте а стил.мање датотеку и додајте следеће:

@видтх:400пк;
@висина:400пк;
@вертикални-центар: центар;
@ткт-вхите: бео;
@бг-ред: ргб(220, 11, 11);
@фонт-40:40пк;
див {
ширина: @видтх;
висина: @хеигхт;
приказ: флек;
боја: @ткт-бело;
боја позадине: @бг-ред;
фонт-сизе: @фонт-40;
}

Сада, када можете саставити .мање фајл у .цсс помоћу лессц команда:

лессц стиле.лесс стиле.цсс

Преведени ЦСС би требало да изгледа овако:

див {
ширина: 400пк;
висина: 400пк;
приказ: флек;
боја: бео;
боја позадине: #дц0б0б;
фонт-сизе: 40пк;
}

Када отворите прегледач, ово би требало да видите:

Постоји много више што можете да урадите са променљивим у Лесс-у, као што је интерполација која вам омогућава да користите променљиве као имена селектора, УРЛ адресе и још много тога. Ево примера како да примените интерполацију променљиве:

@цустом-селецтор: контејнер;
.@{цустом-селецтор} {
паддинг: 10пк;
маргина: 10пк;
граница: чврст 10пк;
}

Горњи блок кода користи @{...} клаузулу за коришћење променљиве као селектора. Када се компајлира, код ће резултирати следећим:

.контејнер{
паддинг: 10пк;
маргина: 10пк;
граница: чврст 10пк;
}

Аритметичке операције у мањем

Лесс такође пружа подршку за аритметичке операције као што су сабирање, одузимање, дељење и множење. Ове операције раде са константама, вредностима и променљивим.

@променљива-1:5пк;
// Операција множења између променљиве и константе
@променљива-2:@променљива-1 * 2
// Операција сабирања између вредности и променљиве.
@променљива-3:10пк + @променљива-2

Како користити миксине

Миксинови вам омогућавају да поново користите стилове (или ЦСС код) у целој табели стилова. Остало ЦСС екстензије као што је Сасс такође нуде Микинс. Да бисте илустровали како миксини функционишу у Лесс-у, направите индек.хтм и додајте следећи код:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8">
<метахттп-екуив="Кс-УА-Цомпатибле"садржаја=„ИЕ=ивица“>
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0">
<линкрел="стилесхеет"хреф="стиле.цсс">
<наслов>Коришћење мање ЦСС-анаслов>
глава>
<тело>
<див>
 Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит. Солута
 арцхитецто репудиандае ипсум аними велит ид исте долоре репрехендерит
 долорум! Волуптате куос аутем цулпа ет сит, аццептнда реициендис
 фацилис унде секуи.
див>
<стр>
 Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит. Солута
 арцхитецто репудиандае ипсум аними велит ид исте долоре репрехендерит
 долорум! Волуптате куос аутем цулпа ет сит, аццептнда реициендис
 фацилис унде секуи.
стр>
<стр>
 Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит. Солута
 арцхитецто репудиандае ипсум аними велит ид исте долоре репрехендерит
 долорум! Волуптате куос аутем цулпа ет сит, аццептнда реициендис
 фацилис унде секуи.
стр>
тело>
хтмл>

Затим креирајте а стил.мање датотеку и додајте следеће редове:

.пример текста() {
боја позадине: жута;
}
.прво слово() {
боја позадине: црвена;
боја: бео;
фонт-сизе: 30пк;
}
стр {
.пример текста();
}
стр::прво слово {
.прво слово();
}

У блоку кода изнад, постоје две миксне класе: .пример текста и .прво слово. Када желите да користите миксин у другом делу листе стилова, једноставно га референцирајте по имену са заградама на крају: .микин(). У претраживачу би требало да видите нешто овако:

Угнежђење стила у Мање

Рецимо да имате родитељски див са два елемента као потомцима: а стр елемент и други див. Обично, ако желите да стилизујете стр елемент са црвеном бојом и див елементе зелене боје, можете користити следећи приступ:

дивстр {
боја: црвена;
}
див {
боја: зелен
}

Лесс пружа сличну функционалност коришћењем гнежђење. Дакле, у овом случају, Мањи еквивалент блоку кода изнад би био:

див {
боја: зелен;
стр {
боја: црвена;
 }
}

Не само да је ово лакше замотати главу, већ и чини код лакшим за одржавање. Лакше је упућивање на родитељске селекторе са мање & оператер. На пример:

дугме {
боја позадине: Плави;
граница: ниједан;
&:лебдети {
боја позадине: сива;
преобразити: Скала(1.2);
 }
}

Горњи блок кода ће резултирати следећим ЦСС кодом када се компајлира:

дугме {
боја позадине: Плави;
граница: ниједан;
}
дугме:лебдети {
боја позадине: сива;
преобразити: Скала(1.2);
}

Разумевање обима и функција у мањем

Као и обични програмски језици, променљиве имају опсег блока у коме их дефинишете. Да бисте то илустровали, креирајте нову индек.хтм датотеку и додајте први ХТМЛ шаблонски код који сте добили раније. Затим додајте следећи блок у тело ознака:

<дивкласа="спољни див">
 Спољашњи Див треба да буде црвен.
<бр />
<спанкласа="унутрашњи див">
 Унутрашњи див треба да буде зелен.
спан>
див>

У стил.мање датотеку, додајте следеће редове:

@бг-цолор: црвена;
тело {
фонт-сизе: 40пк;
боја: бео;
маргина: 20пк;
}
.иннер-див {
@бг-цолор: зелен;
боја позадине: @бг-цолор;
}
.оутер-див {
боја позадине: @бг-цолор;
}

Тхе иннер-див блок редефинише бг-цолор променљива, ограничена на само тај блок. Дакле, зелена боја се односи само на ту класу и не утиче на глобалну бг-цолор променљива. Када преведете и отворите резултат у претраживачу, ово би требало да видите:

Лесс такође пружа згодне функције које могу бити корисне у неким сценаријима. На пример, ако желите да подесите стил само ако је испуњен одређени услов, то можете учинити помоћу ако функција. Ова функција има следећу синтаксу:

ако((услов), вредност1, вредност2)

Код се враћа вредност1 ако је испуњен услов и вредност2 иначе. Ево примера:

@вар1:20пк;
@вар2:20пк;
див {
паддинг: ако((@вар1 = @вар2), 10пк, 20пк);
}

Горњи блок кода би требало да резултира следећим ЦСС-ом када се компајлира:

див {
паддинг: 10пк;
}

Урадите више са мање и другим ЦСС екстензијама

Хиљаде програмера користе Лесс да би писање ЦСС-а учинило помало пријатним. Невероватне функције као што су функције, миксини и варијабле су само мали део онога што Лесс нуди.

Мање је погодно и за мале и за велике пројекте. Вреди напоменути да вреди погледати и друге подједнако невероватне ЦСС проширења језика као што су Сасс и Стилус ЦСС.