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

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

Podczas przechodzenia z Sass na natywny CSS należy pamiętać o rozbieżnościach w konwencjach zagnieżdżania stosowanych przez każdą składnię. Różnice te mogą mieć znaczący wpływ na strukturę kodu i ogólny styl, dlatego konieczne jest zapoznanie się z tymi różnicami przed dokonaniem zmiany.

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

Zagnieżdżanie CSS jest wciąż projektem specyfikacji, z różnym wsparciem dla przeglądarek. Upewnij się, że sprawdzasz strony takie jak caniuse.com , aby uzyskać aktualne informacje.

Oto demonstracja rodzaju zagnieżdżonej struktury, którą można zastosować w Sass przy użyciu składni SCSS:

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

Podany fragment kodu dotyczy reguł stylizacji paska nawigacyjnego dokumentu HTML. W szczególności nakazuje, aby wszelkie uporządkowane listy zawarte w elemencie z klasą “nav” były wyświetlane w sposób elastyczny (kolumnowy). Co więcej, nakazuje, aby każdy tekst z hiperłączami pojawiający się w takich elementach miał kolor czarny.

W natywnym CSS powyższa forma zagnieżdżania jest uważana za niedopuszczalną. Aby ta struktura działała efektywnie, należy umieścić symbol ampersand (&) poprzedzający każdy zamknięty element, jak pokazano poniżej:

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

Przed ostatnią poprawką, początkowa iteracja kaskadowych arkuszy stylów (CSS) nie zezwalała na obudowywanie selektorów typów. Jednak po wprowadzeniu najnowszej poprawki możliwe jest teraz pominięcie użycia symbolu “&” podczas otaczania selektorów typów. Niemniej jednak użytkownicy powinni mieć świadomość, że starsze wersje przeglądarek internetowych, takich jak Google Chrome i Apple Safari, mogą nadal nie być kompatybilne z tą zmienioną metodologią.

W przypadkach, gdy selektor zaczyna się od symbolu, takiego jak selektor klasy, dopuszczalne jest wykluczenie znaku ampersand podczas pisania kodu CSS lub Sass. Oznacza to, że podana składnia będzie działać poprawnie zarówno w konwencjonalnym CSS, jak i Sass.

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

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

Jednym z atrakcyjnych aspektów Sassa, który możesz docenić, jest jego zdolność do ułatwiania generowania kodu za pomocą konstrukcji takich jak ta pokazana poniżej:

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

Wyżej wymieniony kod Sass, po kompilacji, daje następujący nieprzetworzony wynik CSS:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}

W standardowym CSS wykorzystanie symbolu “&” do tworzenia nowego selektora nie jest obsługiwane. Jednak podczas korzystania z Sass kompilator skutecznie zastępuje “&” elementem otaczającym, takim jak “.nav”, unikając w ten sposób tworzenia niewłaściwego selektora złożonego, który dawałby odmienne wyniki w porównaniu do zamierzonego wyniku.

Ta instancja kodu powinna działać poprawnie przy użyciu natywnej składni CSS:

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

Podany kod działa ze względu na zgodność między selektorami w nim użytymi. Pierwszy selektor dopasowuje elementy o nazwach klas “nav-list” lub “nav-link”, podczas gdy drugi selektor jest ukierunkowany na elementy o nazwie klasy “nav-link”. Umieszczenie spacji między symbolem “&” a kolejnym selektorem (np. “nav .nav-list”) spowodowałoby nieprawidłowy błąd składni, ponieważ utworzyłoby nową grupę składającą się zarówno z klas “nav”, jak i “.nav-list”, zamiast kierować elementy posiadające obie klasy.

W natywnym CSS użycie symbolu ampersand w sposób pokazany poniżej spowoduje błąd semantyczny:

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

To to samo, co napisanie tego:

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}

Może to być nieoczekiwane, biorąc pod uwagę, że zarówno elementy , jak i znajdują się w selektorze .nav . Jednak ampersand ( & ) skutecznie pozycjonuje zagnieżdżone elementy przed ich elementem nadrzędnym.

Specyfika może być inna

Warto wspomnieć o wpływie na precyzję, który występuje w przypadku zagnieżdżonej składni Sass, w przeciwieństwie do jej odpowiednika w standardowym CSS, co zasługuje na uwagę.

Rzeczywiście, zakładając, że ktoś ma zarówno element główny, jak i element artykułu w swojej strukturze HTML, wykorzystanie dostarczonej stylizacji CSS spowodowałoby, że każdy tag h2 zawarty w tych odpowiednich elementach byłby renderowany czcionką szeryfową.

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

Wynikowy CSS wygenerowany z wyżej wymienionego kodu Sass wygląda następująco:

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

W przeciwieństwie do użycia zagnieżdżonych selektorów w natywnym CSS, zastosowanie równoważnej struktury za pomocą tej samej składni da porównywalny wynik.

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

Selektor is() w LESS różni się nieco od swojego odpowiednika w Sass pod względem obsługi reguł specyficzności. W szczególności, gdy używany jest :is() , specyficzność selektora jest automatycznie podnoszona do najbardziej specyficznego elementu na liście dostarczonych parametrów.

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

Zagnieżdżanie w natywnym CSS może potencjalnie zmienić zamierzone znaczenie danego selektora, ostatecznie wybierając zupełnie inny element.

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

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </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;
  }
}

Wykorzystanie Sass jako preprocesora CSS daje następujący wynik:

W kontekście HTML, jeśli element noszący oznaczenie klasy “dark-theme” zostanie wstawiony do kontenera nadrzędnego oznaczonego klasyfikacją “call-to-action”, wynikowe kryteria wyboru zastosowane przez Sass (preprocesor CSS) staną się dysfunkcyjne. Jednakże, zgodnie z konwencjonalną konwencją CSS (tj. bez uciekania się do preprocesorów CSS), powiązane właściwości stylizacji pozostaną nienaruszone i skuteczne.

Zachowanie wynika ze sposobu, w jaki pseudoklasa :is() działa wewnętrznie, co skutkuje wygenerowaniem późniejszej, nieoznaczonej reprezentacji CSS pokazanej poniżej:

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

Nagłówek, o którym mowa, jest elementem potomnym zarówno elementu .dark-theme , jak i elementu .call-to-action , ale ich konkretna kolejność nie wpływa na jego funkcjonalność. Tak długo, jak nagłówek jest elementem potomnym obu elementów, to, czy są one w określonej kolejności, nie ma wpływu na wynik.

W tym konkretnym scenariuszu jest to mniej powszechny przypadek, ale zrozumienie wewnętrznego mechanizmu selektora :is() może zwiększyć biegłość w zakresie zagnieżdżonych elementów w CSS. Co więcej, taka wiedza ułatwia proces skuteczniejszego rozwiązywania problemów związanych z CSS.

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

Dzięki możliwości kompilacji do CSS, Sass jest kompatybilny z szeroką gamą frameworków UI ze względu na kompatybilność z praktycznie każdym takim frameworkiem. Jego instalacja na różnych platformach, w tym Vue, Preact, Svelte i React, nie wymaga wysiłku, oferując płynną integrację z różnymi technologiami.

Wykorzystanie Sassa w kontekście Reacta oferuje szereg korzyści, w szczególności możliwość tworzenia dobrze zorganizowanych stylizacji wielokrotnego użytku poprzez implementację zmiennych i mixinów. Biegłość w tej technologii może znacznie zwiększyć zdolność do tworzenia wyrafinowanego i pomysłowego kodu, ostatecznie sprzyjając rozwojowi zawodowemu jako programista React.