Разликите между Native CSS и Sass Nesting

Откакто стартира, CSS упорито отказва да поддържа синтаксис за вложени селектори. Алтернативата винаги е била да се използва CSS препроцесор като Sass. Но днес влагането е официално част от родния CSS. Можете да изпробвате тази функция директно в съвременните браузъри.

Ако мигрирате от Sass, ще трябва да вземете предвид всички разлики между естественото влагане и влагането в Sass. Има някои ключови разлики между двете функции за влагане и да сте наясно с тях е от решаващо значение, ако правите превключването.

Трябва да използвате "&" със селектори на елементи в собствения CSS

CSS Nesting все още е чернова на спецификация с различна поддръжка на браузъра. Не забравяйте да проверите сайтове като caniuse.com за актуална информация.

Ето пример за типа вмъкване, който ще видите в Sass, използвайки SCSS синтаксиса:

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

Този CSS блок указва, че всеки неподреден списък вътре в елемент с a нав класът се подравнява като гъвкава колона, по един начин поставяне на HTML елементи на страницата. В допълнение, целият текст на закотвена връзка вътре в елементи с a нав клас трябва да е черен.

Сега, в родния CSS, този вид влагане би бил невалиден. За да работи, ще трябва да включите символа амперсанд (&) пред вложените елементи, така:

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

Ранната версия на CSS влагането не позволяваше влагането на селектори на типове. Скорошна промяна означава, че вече не трябва да използвате "&", но по-старите версии на Chrome и Safari може все още да не поддържат този актуализиран синтаксис.

Сега, ако сте използвали селектор, който започва със символ (напр. селектор на клас), за да насочване към определена част от страницата, можете да пропуснете амперсанда. Така че следният синтаксис ще работи както в родния CSS, така и в Sass:

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

Не можете да създадете нов селектор с помощта на "&" в родния CSS

Една от функциите, които вероятно харесвате в Sass, е възможността да направите нещо подобно:

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

Този Sass код се компилира до следния необработен CSS:

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

В естествения CSS не можете да създадете нов селектор с помощта на "&". Компилаторът Sass замества "&" с родителския елемент (напр. .nav), но собственият CSS ще третира „&“ и частта след него като два отделни селектора. В резултат на това ще се опита да направи съставен селектор, който няма да даде същия резултат.

Този пример обаче ще работи в родния CSS:

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

Това работи, защото първият селектор е същият като nav.nav-списък в обикновен CSS, а вторият е същият като nav.nav-връзка. Добавянето на интервал между "&" и селектора би било еквивалентно на писане nav .nav-списък.

В родния CSS, ако използвате амперсанда по този начин:

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

Това е същото като да напишеш това:

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

Това може да е изненада за вас, като се има предвид, че и двете __навигационен списък и __навигационна връзка са вътре в .nav селектор. Но амперсандът всъщност поставя вложените елементи пред родителския елемент.

Спецификата може да бъде различна

Друго нещо, което трябва да се отбележи, е въздействието върху спецификата, което не се случва в Sass, но се случва в нативното CSS влагане.

Така че да кажем, че имате и ан елемент. Със следния CSS, an във всеки от тези елементи ще използва серифен шрифт:

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

Компилираната версия на горния Sass код е както следва:

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

Но същият синтаксис на влагане в родния CSS ще доведе до различен резултат, на практика същият като:

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

The е() селекторът обработва правилата за специфичност малко по-различно от влагането на Sass. По принцип спецификата на:е() се надстройва автоматично до най-специфичния елемент в списъка с предоставени аргументи.

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

Влагането в нативния CSS може напълно да промени какво всъщност означава селекторът (т.е. избира напълно различен елемент).

Разгледайте например следния HTML:

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

И следния CSS:

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

Това е резултатът, ако използвате Sass като CSS компилатор:

Сега в HTML блока, ако преместите с класа на тъмна тема вътре в това на призив за действие, това би счупило селектора (в режим Sass). Но когато преминете към обикновен CSS (т.е. без CSS препроцесор), стиловете ще продължат да работят.

Това се дължи на начина, по който :е() работи под капака. Така горният вложен CSS се компилира в следния обикновен CSS:

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

Това уточнява a .заглавие това е потомък и на двете .тъмна тема и .призив за действие. Но редът на тези няма особено значение. Докато на .заглавие е потомък на .призив за действие и .тъмна тема, работи и в двата реда.

Това е ръбов случай и не е нещо, с което ще се сблъскате толкова често. Но разбирането на :е() основната функционалност на селектора може да ви помогне да овладеете как работи влагането в CSS. Това също прави отстраняване на грешки във вашия CSS много по-лесно.

Научете как да използвате Sass в React

Тъй като Sass се компилира в CSS, можете да го използвате с практически всяка UI рамка. Можете да инсталирате CSS препроцесора в проекти на Vue, Preact, Svelte и, разбира се, React. Процесът на настройка на Sass за всички тези рамки също е доста лесен.

Най-голямото предимство на използването на Sass в React е, че ви позволява да пишете чисти, многократно използвани стилове, като използвате променливи и миксини. Като разработчик на React, знанието как да използвате Sass ще ви помогне да пишете по-чист, по-ефективен код и ще ви направи по-добър разработчик като цяло.