Шта је Стилус ЦСС и како га користите?

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

Научите како да користите Стилус ЦСС и имаћете још једну опцију, са једним од најпопуларнијих ЦСС предпроцесора.

Шта је ЦСС препроцесор?

ЦСС претпроцесори су услужни програми који олакшавају писање ЦСС-а. Они често компајлирају код из сопствене прилагођене синтаксе у .цсс формат који прегледачи могу да разумеју.

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

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

Како ради Стилус ЦСС

Да бисте инсталирали Стилус у свом локалном окружењу, потребан вам је Ноде.јс и било који други Ноде Пацкаге Манагер (НПМ) или Иарн инсталиран на вашој машини. Покрените следећу наредбу терминала:

нпм инсталл оловка

Или:

пређе додати оловку

Свака Стилус ЦСС датотека завршава се са а .стил проширење. Када напишете свој ЦСС код за стилус, можете га компајлирати овом командом:

оловка .

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

стилус --цсс стиле.цсс стиле.стил

Синтакса и селектори родитеља у Стилус ЦСС

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

Оловка подржава синтаксу сличну Питхон-у, што значи да можете дефинисати блокове користећи удубљења, као што је ово:

.контејнер
маргина: 10пк

Блок кода изнад се компајлира у следећи ЦСС:

.контејнер {
маргина: 10пк;
}

Баш као у ЦСС претпроцесорима као што је Лесс, можете референцирати родитељски селектор са & карактер:

дугме
боја: бео;
 &:лебдети
боја: жута;

Који се компајлира у:

дугме {
боја: #ффф;
}
дугме:лебдети {
боја: #фф0;
}

Како користити променљиве у ЦСС оловци

У ЦСС претпроцесорима као што је Лесс ЦСС, ви дефинишете променљиве помоћу @ карактер, док традиционални ЦСС користи „--“ да дефинише променљиву.

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

бг-цолор = црн

Сада можете користити променљиву у .стил фајл овако:

див
боја позадине: бг-цолор

Блокови кода изнад се компајлирају у следећи ЦСС:

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

Можете дефинисати нулту променљиву са заградама. На пример:

празна променљива = ()

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

елемент-видтх = 563пк
див
ширина: елемент-видтх
висина: (елемент-видтх / 2)

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

див
ширина: 563пк
висина: (@видтх / 2)

У овом блоку кода, @ симбол вам омогућава да референцирате стварну ширина имовине на див. Без обзира на приступ који одаберете, када саставите .стил датотеку, требало би да добијете следећи ЦСС:

див {
ширина: 563пк;
висина: 281.5пк;
}

Функције у Стилус ЦСС

Можете креирати функције које враћају вредности у Стилус ЦСС. Рецимо да желите да подесите Поравнање текста својство дива да "центрира" ако је ширина је већи од 400 пиксела или „лево“ ако је ширина је мањи од 400 пиксела. Можете креирати функцију која управља овом логиком.

алигнЦентер(н)
ако (н > 400)
 'центар'
другоако (н < 200)
 'лево'
див {
ширина: 563пк
Поравнање текста: алигнЦентер(@видтх)
висина: (@видтх / 2)
}

Овај блок кода позива алигнЦентер функцију, преношење ширина вредност својства упућивањем на њу са @ симбол. Тхе алигнЦентер функција проверава да ли је њен параметар, н, је већи од 400 и враћа "центар" ако јесте. Ако н је мањи од 200, функција враћа "лево".

Када се компајлер покрене, требало би да произведе следећи излаз:

див {
ширина: 563пк;
Поравнање текста: 'центар';
висина: 281.5пк;
}

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

Оловка пружа решење: именовани параметри. Користите их уместо уређених параметара када позивате функцију, на пример:

одузимати(б:30пк, а:10пк)/*-20px*/

Када користити ЦСС препроцесор

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

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