Како користити функције у мањем ЦСС-у

Лесс ЦСС је робустан и динамичан ЦСС претпроцесор који је привукао значајну пажњу и популарност последњих година. Као предпроцесор, служи као проширење „Ванилла ЦСС“, традиционалног ЦСС стилског језика који се користи на вебу. развој, пружањем низа додатних функција и функционалности које побољшавају укупан стил искуство.

Ако сте добро упућени у писање стандардног ЦСС-а, можете неприметно да пређете на коришћење Мање ЦСС-а без стрме криве учења. Ова компатибилност олакшава одржавање постојећег ЦСС знања уз искориштавање напредних могућности Лесса.

Шта су функције и зашто су важне?

У програмирању, функција је блок кода који обавља одређени задатак. Такође га можете поново користити негде другде у програму. Функције обично узимају податке, обрађују их и враћају резултате.

Они олакшавају смањење дупликата кода унутар програма. На пример, рецимо да имате програм који израчунава попуст на основу цене коју корисник унесе. У а језик као што је ЈаваСцрипт, можете га имплементирати овако:

функцијацхецкДисцоунт(цена, праг){
ако (цена >= праг){
дозволити попуст = 5/100 * Цена;
повратак`Ваш попуст је $${дисцоунт}`;
 } друго {
повратак`Жао нам је, овај артикал се не квалификује за попуст. `
 }
}

Затим можете позвати функцију и проследити Цена анд тхе праг.

дозволити цена = одмах ("Унесите цену артикла: ")
упозорење (провери Попуст (цена, 500))

Апстраховањем логике за проверу попуста, програм није само читљив, већ сада имате блок кода за вишекратну употребу који обрађује попуст и враћа резултат. Функције могу још много тога, али ово су само основе.

Разумевање функција у мање ЦСС-а

У традиционалном ЦСС-у, вама као програмеру постоји веома ограничен скуп функција. Једна од најпопуларнијих функција у ЦСС-у је цалц()матх функција који ради управо оно што се чини — обавља прорачуне и користи резултат као вредност својства у ЦСС-у.

стр{
боја позадине: црвена;
ширина: цалц(13пк- 4пк);
}

У Лесс ЦСС-у постоји неколико функција које раде више од само аритметичких операција. Једна функција на коју ћете можда наићи у Лесс-у је ако функција. Тхе ако функција узима три параметра: услов и две вредности. Блок кода испод показује како можете да користите ову функцију:

@видтх: 10пк;
@хеигхт: 20пк;
див{
маргина:ако((@видтх > @висина), 10пк, 20пк)
}

У блоку кода изнад, преводилац Лесс проверава да ли је променљива ширина (дефинисано од @ симбол) је већи од променљиве висина. Ако је услов тачан, функција враћа прву вредност после услова (10пк). У супротном, функција враћа другу вредност (20пк).

Након компилације, ЦСС излаз би требао изгледати отприлике овако:

див {
маргина: 20пк;
}

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

Боолеан је променљива која има две могуће вредности: истина или лажно. Са боолеан() функцију у Мање, можете да сачувате тачну или нетачну вредност израза у променљивој за каснију употребу. Ево како то функционише.

@боја текста: црвена;
@бг-цолор: боолеан(@тект-цолор = ред);

У блоку кода изнад, преводилац Лесс проверава да ли боја текста је црвена. Затим бг-цолор променљива чува вредност.

див{
боја позадине: ако(@бг-цолор,зелено жута);
}

Блок кода изнад се компајлира на нешто овако:

див {
боја позадине: зелен;
}

Замена текста унутар стринга са функцијом реплаце().

Синтакса за заменити() функција изгледа овако:

заменити(низ, шаблон, замена, заставе)

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

Опционо, тхе заменити() функција такође може да садржи заставе параметар за заставице регуларног израза.

@низ: "Здраво";
@шаблон: "здраво";
@замена: "ја";
див::пре него што{
садржаја: заменити(@низ,@шаблон,@замена)
}

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

див::пре него што {
садржаја: "Здраво";
}

Листа функција у мањем ЦСС-у

У Лесс ЦСС-у користите зарезе или размаке да дефинишете листу вредности. На пример:

@намирнице: "хлеб", "банана", "кромпир", "млеко";

Можете користити дужина() функција за процену броја елемената на листи.

@ресулт: ленгтх(@гроцериес);

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

@тхирд-елемент: екстракт(@намирнице, 3);

За разлику од редовних програмских језика где индекс листе почиње од 0, почетни индекс листе у Лесс ЦСС је увек 1.

Још једна функција листе која би могла да буде згодна када правите веб странице са Лессом је домет() функција. Захваћа три параметра. Први параметар одређује почетну позицију у опсегу. Други параметар указује на крајњу позицију, а последњи параметар специфицира вредност повећања или смањења између сваке ставке у опсегу. Ако није наведено, подразумевана вредност је 1.

див {
 маргина: опсег (10пк, 40пк, 10);
}

Горњи блок кода треба да се преведе на следеће:

див {
 маргина: 10пк 20пк 30пк 40пк;
}

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

Прављење једноставне веб странице са мање ЦСС функција

Време је да спојите све што сте научили и направите једноставан пројекат са мање ЦСС-а. Направите фасциклу и додајте индек.хтм и стил.мање фајлови.

Отвори индек.хтм датотеку и додајте следећи ХТМЛ код.

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8">
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0">
<линкрел="стилесхеет/мање"тип="текст/цсс"хреф="стиле.лесс" />
<наслов>Документнаслов>
глава>
<тело>
<дивкласа="контејнер">
<х1>
х1>
див>
<скриптасрц=" https://cdn.jsdelivr.net/npm/less" >скрипта>
тело>
хтмл>

У блоку кода изнад, постоји родитељ "контејнер"див са празним х1 елемент. Тхе срц атрибут на скрипта таг указује на путању до мањег ЦСС компајлера.

Без овога скрипта таг, претраживач неће моћи да разуме ваш код. Алтернативно, можете инсталирати Лесс ЦСС на свој рачунар преко Ноде Пацкаге Манагер (НПМ), покретањем следеће команде у терминалу:

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

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

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

У стил.мање датотеку, креирајте две променљиве и то: контејнер-ширина и контејнер-бг-боја да представља ширину и боју позадине "контејнер"див редом.

@цонтаинер-видтх: 50рем;
@цонтаинер-бг-цолор: жута;

Затим креирајте три променљиве и то: низ, шаблон, и замена. Затим додајте стилове за "контејнер"див анд тхе х1 елемент.

@низ: "Здраво од деце планете Земље!";
@шаблон: "деца планете Земље!";
@замена: "становници Плутона!";
.контејнер{
ширина: @цонтаинер-видтх;
боја позадине: @цонтаинер-бг-цолор;
паддинг: ако(@цонтаинер-видтх > 30рем, домет(20пк, 80пк, 20),"");
граница: чврст;
}
х1:прво дете::после{
садржаја: заменити(@низ,@шаблон,@замена);
}

У блоку кода изнад, тхе домет() функција поставља паддинг имовине на "контејнер"див. Компајлер Лесс треба да компајлира стил.мање датотеку у следеће:

.контејнер {
ширина: 50рем;
боја позадине: жута;
паддинг: 20пк 40пк 60пк 80пк;
граница: чврст;
}
х1:прво дете::после {
садржаја: "ЗдравоизтхестановникаофПлутон!";
}

Када отворите индек.хтм датотеку у претраживачу, ово би требало да видите:

Побољшајте своју продуктивност помоћу ЦСС претпроцесора

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

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