Skillnaderna mellan Native CSS och Sass Nesting

Sedan lanseringen har CSS hårdnackat vägrat att stödja en syntax för nestning av selectors. Alternativet har alltid varit att använda en CSS-preprocessor som Sass. Men idag är nesting officiellt en del av native CSS. Du kan testa den här funktionen direkt i moderna webbläsare.

Vid övergången från Sass till native CSS är det viktigt att vara medveten om skillnaderna i nesting-konventioner som används av respektive syntax. Dessa skillnader kan ha en betydande inverkan på din kodstruktur och övergripande stil, så det är absolut nödvändigt att du bekantar dig med dessa variationer innan du gör övergången.

Du måste använda “&” med elementväljare i Native CSS

CSS Nesting är fortfarande ett utkast till specifikation, med varierande webbläsarstöd. Se till att kontrollera webbplatser som caniuse.com för aktuell information.

Här är en demonstration av den typ av nästlad struktur som kan användas inom Sass med hjälp av SCSS-syntaxen:

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

Det givna kodavsnittet gäller stylingregler för ett HTML-dokuments navigeringsfält. Specifikt dikterar den att alla ordnade listor som finns i ett element som bär “nav”-klassen ska visas på ett flexibelt (kolumn) anpassat sätt. Vidare föreskrivs att all hyperlänkad text som visas i sådana element måste ha färgen svart.

I Native CSS anses den ovan nämnda formen av nesting vara oacceptabel. För att denna struktur ska fungera effektivt måste man införliva ampersandsymbolen (&) före varje inneslutet element, som illustreras nedan:

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

Innan en ny ändring tillät den ursprungliga iterationen av Cascading Style Sheets (CSS) inte inkapsling av typväljare. Men med den senaste justeringen på plats är det nu möjligt att utelämna användningen av symbolen “&” när typväljare omsluts. Användare bör dock vara medvetna om att äldre versioner av webbläsare som Google Chrome och Apple Safari fortfarande kan sakna kompatibilitet med denna reviderade metod.

I fall där en selector börjar med en symbol, t.ex. en klasselector, är det tillåtet att utesluta ampersanden när man skriver CSS- eller Sass-kod. Detta innebär att den angivna syntaxen kommer att fungera korrekt i både konventionell CSS och Sass.

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

Du kan inte skapa en ny väljare med “&” i Native CSS

En av de tilltalande aspekterna av Sass som du kanske uppskattar är dess förmåga att underlätta kodgenerering genom konstruktioner som den som visas nedan:

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

Den ovannämnda Sass-koden, efter kompilering, ger den efterföljande obearbetade CSS-utgången:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}

I standard CSS stöds inte användning av symbolen “&” för att skapa en ny selektor. Men när Sass används ersätter kompilatorn effektivt “&” med det omslutande elementet, till exempel “.nav”, och undviker därmed bildandet av en felaktig sammansatt väljare som skulle ge olikartade resultat jämfört med det avsedda resultatet.

Denna kodinstans bör fungera korrekt med hjälp av inbyggd CSS-syntax:

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

Den medföljande koden fungerar på grund av korrespondensen mellan de väljare som används i den. Den första väljaren matchar element med klassnamn på antingen “nav-list” eller “nav-link”, medan den andra väljaren specifikt riktar sig till dem med ett klassnamn på “nav-link”. Om ett mellanslag placeras mellan symbolen “&” och den efterföljande väljaren (t.ex. “nav .nav-list”) skulle det leda till ett ogiltigt syntaxfel, eftersom det skulle skapa en ny grupp som består av både klasserna “nav” och “.nav-list”, i stället för att rikta in sig på element som har båda klasserna.

I CSS nativt kommer användning av en ampersand-symbol på det sätt som visas nedan att leda till ett semantiskt fel:

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

Det är samma sak som att skriva detta:

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}

Det kan verka oväntat eftersom både och elementen ligger inom .nav selector. Men ampersanden ( & ) placerar effektivt de kapslade elementen före deras överordnade element.

Specificitet kan vara annorlunda

Det är värt att nämna den effekt på precision som uppstår med Sass nested syntax, i motsats till dess motsvarighet i standard CSS, som förtjänar uppmärksamhet.

Om man antar att man har både ett huvudelement och ett artikelelement i sin HTML-struktur, skulle användningen av den tillhandahållna CSS-styling resultera i att alla h2-taggar som finns i dessa respektive element återges med ett serif-teckensnitt.

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

Den resulterande CSS som genereras från den ovan nämnda Sass-koden ser ut som följer:

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

I motsats till att använda kapslade väljare inom native CSS, kommer en likvärdig struktur genom samma syntax att ge ett jämförbart resultat.

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

Väljaren is() i LESS skiljer sig något från dess motsvarighet i Sass när det gäller hantering av specificitetsregler. I synnerhet när :is() används, höjs specificiteten för väljaren automatiskt till den för det mest specifika elementet i listan över parametrar som tillhandahålls.

Elementens ordning kan ändra det valda elementet

Nesting inom native CSS har potential att ändra den avsedda betydelsen av en given selector och i slutändan välja ett helt annat element.

Tänk på följande HTML, till exempel:

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>

Och följande CSS:

 body { font-size: 5rem; }

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

Att använda Sass som en CSS preprocessor ger följande resultat:

I ett HTML sammanhang, om elementet med klassbeteckningen “dark-theme” infogas i den överordnade behållaren som betecknas med klassificeringen “call-to-action”, kommer de resulterande urvalskriterierna som används av Sass (en CSS preprocessor) att bli dysfunktionella. Enligt konventionell CSS-konvention (dvs. utan användning av CSS-preprocessorer) kommer dock de tillhörande stylingegenskaperna att förbli oförändrade och effektiva.

Beteendet beror på det sätt på vilket pseudoklassen :is() fungerar internt, vilket resulterar i genereringen av den efterföljande osmyckade CSS-representationen som visas nedan:

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

Rubriken i fråga är en ättling till både elementet .dark-theme och elementet .call-to-action , men deras specifika ordning påverkar inte dess funktionalitet. Så länge rubriken är en ättling till båda elementen påverkar det inte resultatet om de är i en viss ordning.

I detta specifika scenario är det ett mindre vanligt fall, men att förstå den inneboende mekanismen i :is()-väljaren kan förbättra ens färdigheter när det gäller kapslade element i CSS. Dessutom underlättar sådan kunskap processen att felsöka CSS-problem på ett mer effektivt sätt.

Lär dig använda Sass i React

Som ett resultat av dess förmåga att kompilera till CSS är Sass kompatibel med ett omfattande utbud av UI-ramverk på grund av dess kompatibilitet med praktiskt taget alla sådana ramverk. Installationen på olika plattformar som Vue, Preact, Svelte och React är enkel och erbjuder en sömlös integrationsupplevelse över olika tekniker.

Att använda Sass inom ramen för React erbjuder flera fördelar, särskilt förmågan att skapa välorganiserad och återanvändbar styling genom implementering av variabler och mixins. Färdigheter i denna teknik kan avsevärt förbättra ens förmåga att producera förfinad och resursstark kod, vilket i slutändan främjar professionell tillväxt som React-utvecklare.