Różnice między natywnym CSS a zagnieżdżaniem Sassa

Od chwili premiery CSS uparcie odmawia obsługi składni zagnieżdżania selektorów. Alternatywą zawsze było użycie preprocesora CSS, takiego jak Sass. Ale dzisiaj zagnieżdżanie jest oficjalnie częścią natywnego CSS. Możesz wypróbować tę funkcję bezpośrednio w nowoczesnych przeglądarkach.

Jeśli przeprowadzasz migrację z Sass, musisz wziąć pod uwagę wszelkie różnice między zagnieżdżaniem natywnym a zagnieżdżaniem Sass. Istnieje kilka kluczowych różnic między obydwoma funkcjami zagnieżdżania, a świadomość ich jest kluczowa przy podejmowaniu decyzji o zmianie.

Musisz używać „&” z selektorami elementów w natywnym CSS

Zagnieżdżanie CSS to wciąż wersja robocza specyfikacji, z różną obsługą przeglądarek. Koniecznie sprawdź strony takie jak caniuse.com w celu uzyskania aktualnych informacji.

Oto przykład typu zagnieżdżenia, jaki można zobaczyć w Sassie, przy użyciu składni SCSS:

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

Ten blok CSS określa, że ​​dowolna nieuporządkowana lista wewnątrz elementu z a nawigacja class wyrównuje się jako kolumna elastyczna, w jeden ze sposobów rozmieszczanie elementów HTML na stronie. Ponadto cały tekst linku kotwiczącego wewnątrz elementów z a nawigacja klasa powinna być czarna.

W natywnym CSS taki rodzaj zagnieżdżenia byłby nieprawidłowy. Aby to zadziałało, należy umieścić symbol ampersanda (&) przed zagnieżdżonymi elementami, na przykład:

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

Wczesna wersja zagnieżdżania CSS nie pozwalała na zagnieżdżanie selektorów typów. Niedawna zmiana oznacza, że ​​nie musisz już używać znaku „&”, ale starsze wersje przeglądarek Chrome i Safari mogą jeszcze nie obsługiwać tej zaktualizowanej składni.

Teraz, jeśli używasz selektora rozpoczynającego się od symbolu (np. selektora klasy), to kieruj reklamy na określoną część strony, możesz pominąć ampersand. Zatem poniższa składnia będzie działać zarówno w natywnym CSS, jak i w Sassie:

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

Nie można utworzyć nowego selektora za pomocą „&” w natywnym CSS

Jedną z funkcji, które prawdopodobnie lubisz w Sassie, jest możliwość zrobienia czegoś takiego:

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

Ten kod Sass kompiluje się do następującego surowego CSS:

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

W natywnym CSS nie można utworzyć nowego selektora za pomocą „&”. Kompilator Sass zastępuje „&” elementem nadrzędnym (np. .nawigacja), ale natywny CSS będzie traktował „&” i część po nim jako dwa osobne selektory. W rezultacie spróbuje utworzyć selektor złożony, co nie da tego samego rezultatu.

Ten przykład będzie jednak działał w natywnym CSS:

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

Działa to, ponieważ pierwszy selektor jest taki sam jak lista nav.nav w zwykłym CSS, a drugi jest taki sam jak nav.nav-link. Dodanie spacji pomiędzy „&” a selektorem byłoby równoznaczne z napisaniem nav .nav-list.

W natywnym CSS, jeśli użyjesz znaku ampersand w ten sposób:

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

To tak samo jak napisać to:

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

Może to być dla Ciebie zaskoczeniem, biorąc pod uwagę, że zarówno __lista nawigacyjna I __nav-link są wewnątrz .nawigacja selektor. Ale znak ampersand faktycznie umieszcza zagnieżdżone elementy przed elementem nadrzędnym.

Specyfika może być inna

Kolejną rzeczą wartą odnotowania jest wpływ na specyfikę, który nie ma miejsca w Sassie, ale ma miejsce w natywnym zagnieżdżaniu CSS.

Powiedzmy, że masz i element. Z następującym CSS, an w którymkolwiek z tych elementów zostanie użyta czcionka szeryfowa:

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

Skompilowana wersja powyższego kodu Sass wygląda następująco:

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

Ale ta sama składnia zagnieżdżania w natywnym CSS da inny wynik, w rzeczywistości taki sam jak:

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

The Jest() selektor obsługuje reguły specyfiki nieco inaczej niż zagnieżdżanie Sassa. Zasadniczo specyfika:Jest() zostaje automatycznie zaktualizowany do najbardziej konkretnej pozycji na liście dostarczonych argumentów.

Kolejność elementów może zmienić wybrany element

Zagnieżdżanie w natywnym CSS może całkowicie zmienić znaczenie selektora (tj. wybrać zupełnie inny element).

Rozważmy na przykład następujący kod HTML:

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

I następujący CSS:

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

Oto wynik, jeśli użyjesz Sassa jako kompilatora CSS:

Jeśli teraz w bloku HTML chcesz przenieść plik z klasą ciemny schemat wewnątrz tego wezwanie do działania, spowodowałoby to uszkodzenie selektora (w trybie Sass). Ale kiedy przełączysz się na zwykły CSS (tj. bez preprocesora CSS), style będą nadal działać.

Dzieje się tak ze względu na sposób, w jaki :Jest() działa pod maską. Zatem powyższy zagnieżdżony CSS kompiluje się do następującego zwykłego CSS:

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

To określenie a .nagłówek to jest potomek obu .ciemny schemat I .wezwanie do działania. Ale kolejność nie ma tak naprawdę znaczenia. Tak długo jak .nagłówek jest potomkiem .wezwanie do działania I .ciemny schemat, działa to w dowolnej kolejności.

Jest to przypadek Edge i nie jest to coś, z czym będziesz się często spotykać. Ale zrozumienie :Jest() Podstawowa funkcjonalność selektora może pomóc Ci opanować działanie zagnieżdżania w CSS. To także sprawia debugowanie CSS dużo łatwiej.

Dowiedz się, jak używać Sassa w React

Ponieważ Sass kompiluje się do CSS, możesz go używać z praktycznie dowolnym frameworkiem interfejsu użytkownika. Preprocesor CSS możesz zainstalować w projektach Vue, Preact, Svelte i – oczywiście – React. Proces konfiguracji Sassa dla wszystkich tych frameworków jest również dość prosty.

Największą zaletą używania Sassa w React jest to, że pozwala pisać czyste, nadające się do ponownego użycia style przy użyciu zmiennych i miksów. Jako programista React, wiedza o tym, jak korzystać z Sassa, pomoże Ci pisać czystszy, wydajniejszy kod i ogólnie sprawi, że będziesz lepszym programistą.