Створите веб локацију помоћу Сасс-а

Сасс сите

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

како постати графитар

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



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



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

Преузмите датотеке за овај водич овде (издање 282)



Снимак екрана веб локације Сасс

Веб локација Сасс садржи мноштво корисне документације

01. Подесите компајлер

Коришћење Сасс-а у суштини захтева компајлер. Најједноставнији начин да то урадите био би у командној линији. То можете учинити помоћу Хомебрев-а. Компајлер Сасс имплементиран је на неколико различитих језика, а Хомебрев ће инсталирати верзију Дарт, која је брза.

brew install sass/sass/sass

02. Направите Сасс датотеку

Покушајмо да направимо једноставну Сасс датотеку да бисмо видели компајлер на делу. Један од најједноставнијих концепата у Сасс-у су променљиве, које се једном могу навести помоћу а $ префикса, а затим се користи у целом коду. Створићемо сасс-инпут.сцсс .



$text-color: #cccccc; body { color: $text-color; }

03. Компилација командне линије

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

sass sass-input.scss css-output.css

04. Аутоматизујте своју изградњу

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

mkdir src mkdir src/sass mkdir public mkdir public/css sass --watch src/sass/:public/css/

05. Играјте се са стилом Сасс

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

адобе премиере елементс вс премиере про
cd public curl -o index.html https://raw. githubusercontent.com/simon-a-j/sass- tutorial/ master/public/index.html

06. Главни табеларни приказ

Користимо стилес.цсс као главну ЦСС улазну тачку, коју ћемо касније користити за увоз осталих модула. То значи да морамо рећи Сасс-у да генерише ову датотеку, тако да такође морамо створити датотеку стилес.сцсс у нашој фасцикли срц / сасс. Ако трчите сасс - сат као и раније, ово ће се аутоматски компајлирати у ЦСС у јавни / цсс директоријума, а освежавање ваше странице приказаће његове промене. Покушајте да извршите неке измене и освежите ХТМЛ страницу у прегледачу док крећете.

// styles.scss body { font-family: sans-serif; text-align: center; }

07. Управљање шемом боја

Веб локација компаније Сасс са шемом боја плаве боје

Сада постоје шеме боја захваљујући делимичном Сасу

Погледајмо како нам Сасс може помоћи у управљању шемом боја за веб локацију. Уобичајено је имати палету од пет или шест боја за веб страницу. Можемо их екстернализовати у _цолоурс.сцсс . Префикс доње црте говори Сассу да то не компајлира у нову ХТМЛ датотеку („делимичну“). Али можемо га користити на мало другачији начин.

// _colours.scss $colour-primary: #231651; $colour-secondary: #2374AB; $colour-light: #D6FFF6; $colour-highlight1: #4DCCBD; $colour-highlight2: #FF8484;

08. Користите променљиве боје

Да бисмо користили ове променљиве боје које смо управо поставили, можемо рећи Сасс-у да увози садржај _цолоурс.сцсс у наш главни табеларни стил. То радимо помоћу @увоз изјава. Када то учините, приметите како се променљиве решавају у излазној ЦСС датотеци.

// styles.scss @import “_colours.scss”; body { font-family: sans-serif; text-align: center; background: linear-gradient(155deg, $colour-primary 70%, $colour-secondary 70%); color: $colour-light; min-height: 100vh; } h1 { color: $colour-highlight1; } h2 { color: $colour-highlight2; }

09. Стилови гнезда

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

a { color: $colour-secondary; } .profile-header { a { font-size: 16px; margin-left: 10px; margin-right: 10px; padding: 10px; border-radius: 5px; color: $colour-light; background-color: $colour-secondary; } }

10. Направите одговарајућу мрежу

Сасс локација са мрежом

како направити пут у Пхотосхопу
Одзивном мрежом је лакше управљати помоћу Сасс променљивих и гнежђењем

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

$breakpoint: 800px; .profile-body { display: flex; align-items: stretch; justify-content: space-around; margin-top: 32px; margin-left: 10vw; margin-right: 10vw; @media screen and (max-width: $breakpoint) { flex-direction: column; } } .profile-section { background-color: $colour-highlight1; color: $colour-primary; margin: 16px; border-radius: 10px; width: 340px; .profile-content { padding: 20px; } @media screen and (max-width: $breakpoint) { width: 100%; } }

11. Уведите миксине

Сасс са мешавином

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

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

12. Мешавине и променљиве

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

$style1: (foreground: $colour-light, background: $colour-secondary); $style2: (foreground: $colour-primary, background: $colour-highlight1); $style3: (foreground: $colour-primary, background: $colour-highlight2); @mixin content-style($foreground, $background) { color: $foreground; background-color: $background; }

13. Користите свој нови микин

.profile-header { a { @include content-style($style1...); // … } } .profile-section { @include content-style($style2...); // … }

14. Разумевање наследства

Још једна врло моћна карактеристика Сасс-а је наслеђивање. Тренутно имамо два различита стила за везе на нашој страници. Ако желимо да користимо уобичајене стилове у оба, уместо да копирамо и налепимо ЦСС, зашто не бисмо користили класу резервираног места означену са „%“, коју могу обоје проширити, омогућавајући им да наследе њене стилове?

%link-shared { font-size: 16px; margin-left: 10px; margin-right: 10px; padding: 10px; border-radius: 10px; }

15. Продужите часове

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

интервентни тастер за промену величине четке у Пхотосхопу
.profile-header { a { @extend %link-shared; @include content-style($style1...); } } a { @extend %link-shared; @include content-style($style3...); }

16. Измените тему

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

// _colours.scss $colour-primary: #2E1F27; $colour-secondary: lighten($colour-primary, 25%); $colour-light: lighten($colour-primary, 75%); $colour-highlight1: lighten(complement($colour-primary), 50%); $colour-highlight2: lighten(complement($colour-secondary), 50%);

17. Изаберите нови скуп боја

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

$red: random(255); $green: random(255); $blue: random(255); $colour-primary: rgb($red, $green, $blue);

18. Користите библиотеке

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

git clone https://github.com/josephfusco/ angled-edges.git src/sass/angled-edges

19. Тхе Англед Едгес микин

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

@import “angled-edges/_angled-edges.scss”; .profile-section { @include angled-edge(“outside bottom”, “lower right”, $colour-highlight1); @include angled-edge(“outside top”, “upper right”, $colour-highlight1); margin: 120px 16px 120px 16px; // ... }

20. Форматирање излаза

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

sass src/sass/:public/css/ --style compressed

21. Море Сасс

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

Овај чланак је првобитно објављен у броју 282 од Веб дизајнер . Купи издање 282 или претплатите се овде .

Опширније: