Шта је Сасс? Научите како да користите овај језик ЦСС екстензија

Синтаксички сјајни листови стилова (Сасс) су популарни језик проширења ЦСС-а. Језик постоји око 15 година. Добро функционише са сваком верзијом ЦСС-а, чинећи га компатибилним са сваком ЦСС библиотеком и оквиром, од Боотстрап-а до Фоундатион-а.

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

У овом водичу ћете научити како да користите Сасс и његове најважније карактеристике.

Инсталирање Сасс

Постоји неколико начина да користите Сасс на свом уређају. То укључује покретање апликације (као што је ЛивеРелоад или Сцоут-Апп), преузимање Сасс са ГитХуб-а, или га инсталирате користећи нпм.

Инсталирање Сасс-а са нпм-ом

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

нпм инит -и

Извршавање ове команде ће генерисати датотеку пацкаге.јсон са следећим садржајем:

{
 "наме": "ми_апп",
 "верзија": "1.0.0",
 "Опис": "",
 "маин": "индек.јс",
 "скрипте": {
 "тест": "ецхо \"Грешка: није одређен тест\" && излаз 1"
 },
 "кључне речи": [],
 "аутор": "",
 "лиценца": "ИСЦ"
}

Тхе пацкаге.јсон датотека је важна јер служи као конфигурација за ваш пројекат. Сваки пут када инсталирате нови нпм пакет пацкаге.јсон датотека ће то одражавати.

Сада можете да инсталирате Сасс уметањем следеће команде у свој терминал:

нпм инсталл сасс

Ова команда ће ажурирати пацкаге.јсон датотеку креирањем новог поље зависности, који ће садржати нови Сасс пакет. Такође ће генерисати нову пацкаге-лоцк.јсон датотеку и инсталирајте сасс (плус зависности) у а ноде_модулес именик.

Различите врсте датотека Сасс

Сасс датотека може имати једну од две екстензије, .сасс или .сцсс. Главна разлика између њих је у томе што .сцсс датотека користи витичасте заграде и тачке и зарезе (слично као ЦСС), док је .сасс структуре датотека ЦСС користећи увлачење (слично као у Питхон-у). Неки програмери радије користе .сцсс датотеку јер је њена структура ближа ЦСС-у.

Пример .сцсс датотеке

$примари-цолор: плава;
тело {
 боја: $примари-цолор;
 п {
 боја црвена;
 }
}

Пример датотеке .сасс

$примарна боја: плава
тело
 боја: $примари-цолор
 стр
 боја црвена

Састављање Сасс датотеке у ЦСС

Можете саставити појединачну Сасс датотеку користећи сасс програм командне линије:

сасс фајл.сцсс > фајл.цсс

Такође можете покренути сасс у свим датотекама унутар одређеног директоријума:

сасс сцсс: дист/цсс/

Та команда компајлира све Сасс датотеке унутар сцсс директоријум и складишти резултујуће датотеке у дист/цсс.

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

"скрипте": {
 "тест": "ецхо \"Грешка: није одређен тест\" && излаз 1",
 "сасс": "сасс --ватцх сцсс: дист/цсс/"
 },

Ова конфигурација користи --гледати опција. Одржава сасс рад и осигурава да поново компајлира те датотеке кад год се промене. За сваку датотеку, сасс ће генерисати а .цсс и а .цсс.мап фајл.

Да бисте извршили Сасс скрипту изнад, мораћете да извршите следећу команду у свом терминалу:

нпм рун сасс

Покретање те команде ће генерисати излаз сличан овоме:

> ми_апп@1.0.0 сасс Ц:\Усерс\кадеисха\Доцументс\ми_апп
> сасс --ватцх сцсс: дист/цсс/
Преведено сцсс\маин.сцсс у дист\цсс\маин.цсс.
Сасс чека промене. Притисните Цтрл-Ц да зауставите.

Сасс Вариаблес

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

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

$примари-цолор: плава;
тело {
 боја: $примари-цолор;
}

Преводиће се у следећи ЦСС:

тело {
 боја: плава;
}

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

Сасс Микинс

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

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

Коришћење миксина

@микин светла-тема($примарна-боја: бела, $секундарна-боја: #2ц2ц2ц) {
 породица фонтова: 'Франклин Готхиц Медиум', 'Ариал Нарров', Ариал, санс-сериф;
 боја позадине: $примари-цолор;
 боја: $сецондари-цолор;
}
#кућа {
 @инцлуде лигхт-тхеме (плаво);
}

Прва ствар коју бисте могли да приметите у коду изнад је да микин прихвата два аргумента. Можете доделити подразумеване вредности аргументима и заменити их када их укључите.

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

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

#кућа {
 породица фонтова: „Франклин Готхиц Медиум“, „Ариал Нарров“, Ариал, санс-сериф;
 боја позадине: плава;
 боја: #2ц2ц2ц;
}

Сасс функције

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

@фунцтион адд-нумберс($нум-један, $нум-дво){
 $сум: 0;
 $сума: $нум-један + $нум-два;
 @ретурн $сум 
}

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

Сасс Модулес

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

Ево примера који показује како можете да одвојите претходни микс у сопствену датотеку:

Датотека микинс.сцсс

@микин светла-тема($примарна-боја: бела, $секундарна-боја: #2ц2ц2ц) {
 породица фонтова: 'Франклин Готхиц Медиум', 'Ариал Нарров', Ариал, санс-сериф;
 боја позадине: $примари-цолор;
 боја: $сецондари-цолор;
}

Датотека маин.сцсс

@усе 'микинс';
#кућа{
 @инцлуде микинс.лигхт-тхеме;
}

Да бисте увезли и користили спољну датотеку као модул, мораћете да користите @усе кључну реч за увоз. Затим, да бисте користили одређени миксин из увезене датотеке, ставите префикс специфичног имена микса са именом датотеке након чега следи тачка. Компајлирање горњих датотека ће генерисати следећи ЦСС код:

#кућа {
 породица фонтова: „Франклин Готхиц Медиум“, „Ариал Нарров“, Ариал, санс-сериф;
 боја позадине: бела;
 боја: #2ц2ц2ц;
}

Користите Сасс да проширите и организујете свој ЦСС

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

Овај чланак вас учи како да инсталирате и користите Сасс. Научили сте како да креирате Сасс променљиве, миксине, функције и модуле. Сада све што вам преостаје је да креирате ХТМЛ документ и гледате како ваш Сасс код оживљава.

8 основних ЦСС савета и трикова које сваки програмер треба да зна

Реад Нект

О аутору