Разлике између изворног ЦСС-а и Сасс гнежђења

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

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

Морате да користите „&“ са селекторима елемената у изворном ЦСС-у

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

Ево примера типа угнежђења који бисте видели у Сасс-у, користећи СЦСС синтаксу:

.nav {
ul { display: flex; }
a { color: black; }
}

Овај ЦСС блок специфицира да свака неуређена листа унутар елемента са а

нав класа се поравнава као флексибилна колона, један од начина постављање ХТМЛ елемената на страници. Поред тога, сав текст везе сидрења унутар елемената са а нав разред треба да буде црн.

Сада, у матичном ЦСС-у, таква врста угнежђења би била неважећа. Да би то функционисало, мораћете да укључите симбол амперсанда (&) испред угнежђених елемената, на пример:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Рана верзија ЦСС угнежђења није дозвољавала угнежђивање селектора типова. Недавна промена значи да више не морате да користите „&“, али старије верзије Цхроме-а и Сафарија можда још увек не подржавају ову ажурирану синтаксу.

Сада, ако сте користили селектор који почиње симболом (нпр. селектор класе) за циљати одређени део странице, можете изоставити амперсанд. Дакле, следећа синтакса би радила и у матичном ЦСС-у и у Сасс-у:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Не можете да направите нови селектор користећи „&“ у изворном ЦСС-у

Једна од карактеристика које вероватно волите код Сасс-а је могућност да урадите нешто овако:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

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

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

У изворном ЦСС-у, не можете да креирате нови селектор користећи „&“. Сасс компајлер замењује "&" родитељским елементом (нпр. .нав), али изворни ЦСС ће третирати „&“ и део после њега као два одвојена селектора. Као резултат, покушаће да направи сложени селектор, што неће дати исти резултат.

Међутим, овај пример ће радити у изворном ЦСС-у:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

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

У изворном ЦСС-у, ако користите амперсанд овако:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

То је исто као да напишем ово:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Ово би вас могло изненадити, с обзиром на то да су оба __нав-лист и __нав-линк налазе се унутар .нав селектор. Али амперсанд заправо поставља угнежђене елементе испред родитељског елемента.

Специфичност може бити другачија

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

Дакле, рецимо да имате а и један елемент. Са следећим ЦСС-ом, ан у било ком од ових елемената користиће сериф фонт:

#main, article {
h2 {
font-family: serif;
 }
}

Преведена верзија горњег Сасс кода је следећа:

#mainh2,
articleh2 {
font-family: serif;
}

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

:is(#main, article) h2 {
font-family: serif;
}

Тхе је () селектор обрађује правила специфичности мало другачије од Сасс гнежђења. У основи, специфичност:је () се аутоматски надограђује на најспецифичнију ставку на листи понуђених аргумената.

Редослед елемената може променити изабрани елемент

Угнежђење у изворном ЦСС-у може у потпуности да промени шта селектор заправо значи (тј. бира потпуно другачији елемент).

Размотрите следећи ХТМЛ, на пример:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

И следећи ЦСС:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Ово је резултат ако користите Сасс као ЦСС компајлер:

Сада у ХТМЛ блоку, ако бисте померили са класом од Мрачна тема унутар тога од позив на акцију, то би покварило селектор (у режиму Сасс). Али када пређете на обичан ЦСС (тј. без ЦСС претпроцесора), стилови ће наставити да раде.

Ово је због начина на који се :ис() ради испод хаубе. Дакле, горњи угнежђени ЦСС се компајлира у следећи обичан ЦСС:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

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

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

Научите како да користите Сасс у Реацт-у

Пошто се Сасс компајлира у ЦСС, можете га користити са практично било којим УИ оквиром. Можете инсталирати ЦСС препроцесор у Вуе, Преацт, Свелте и—наравно—Реацт пројекте. Процес подешавања за Сасс за све ове оквире је такође прилично једноставан.

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