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

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

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

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

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

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

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

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

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

 npm install stylus 

Или:

 yarn add stylus 

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

 stylus .

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

 stylus --css style.css style.styl 

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

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

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

 .container
    margin: 10px

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

 .container {
  margin: 10px;
}

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

 button
    color: white;
    &:hover
        color: yellow;

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

 button {
  color: #fff;
}
button:hover {
  color: #ff0;
}
 

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

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

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

 bg-color = black

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

 div
    background-color: bg-color

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

 div {
  background-color: #000;
}

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

 empty-variable = ()

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

 element-width = 563px
div
    width: element-width
    height : (element-width / 2)
 

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

 div
    width: 563px
    height: (@width / 2)

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

 div {
  width: 563px;
  height: 281.5px;
}

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

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

 alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'
div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}
 

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

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

 div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}

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

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

 subtract(b:30px, a:10px)  

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

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

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