Erot alkuperäisen CSS: n ja Sass Nestingin välillä

Julkaisunsa jälkeen CSS on sitkeästi kieltäytynyt tukemasta sisäkkäisten valitsimien syntaksia. Vaihtoehtona on aina ollut käyttää CSS-esiprosessoria, kuten Sass. Mutta nykyään sisäkkäisyys on virallisesti osa alkuperäistä CSS: ää. Voit kokeilla tätä ominaisuutta suoraan nykyaikaisissa selaimissa.

Jos olet siirtymässä Sassista, sinun on otettava huomioon mahdolliset erot alkuperäisen sisäkkäisyyden ja Sassin sisäkkäisyyden välillä. Molempien sisäkkäisten ominaisuuksien välillä on joitain keskeisiä eroja, ja niiden tiedostaminen on ratkaisevan tärkeää, jos olet tekemässä vaihtoa.

Sinun on käytettävä &-merkkiä elementtivalitsimien kanssa alkuperäisessä CSS: ssä

CSS Nesting on edelleen luonnosmäärittely, ja selaintuki vaihtelee. Muista tarkistaa sivustot, kuten caniuse.com ajantasaista tietoa varten.

Tässä on esimerkki sisäkkäistyypistä, jonka näet Sassissa käyttämällä SCSS-syntaksia:

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

Tämä CSS-lohko määrittää, että mikä tahansa järjestämätön luettelo elementissä, jossa on a nav luokka tasataan joustavana sarakkeena, yksi tapa HTML-elementtien asettaminen sivulle. Lisäksi kaikki ankkurilinkkiteksti elementtien sisällä, joissa on a nav luokan tulee olla musta.

Nyt alkuperäisessä CSS: ssä tällainen sisäkkäisyys olisi virheellinen. Jotta se toimisi, sinun on sisällytettävä et-merkki (&) sisäkkäisten elementtien eteen, kuten:

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

CSS-sisätyksen varhainen versio ei sallinut tyyppivalitsinten sisäkkäisyyttä. Äskettäin tehty muutos tarkoittaa, että sinun ei enää tarvitse käyttää &-merkkiä, mutta Chromen ja Safarin vanhemmat versiot eivät ehkä vielä tue tätä päivitettyä syntaksia.

Jos nyt käytit valitsinta, joka alkaa symbolilla (esim. luokan valitsin). kohdistaa tiettyyn sivun osaan, voit jättää et-merkin pois. Joten seuraava syntaksi toimisi sekä alkuperäisessä CSS: ssä että Sassissa:

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

Et voi luoda uutta valitsinta käyttämällä &-merkkiä alkuperäisessä CSS: ssä

Yksi ominaisuuksista, joista todennäköisesti pidät Sassissa, on kyky tehdä jotain tämän kaltaista:

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

Tämä Sass-koodi käännetään seuraavaan raaka-CSS: ään:

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

Natiivissa CSS: ssä et voi luoda uutta valitsinta käyttämällä &-merkkiä. Sass-kääntäjä korvaa "&"-merkin pääelementillä (esim. .nav), mutta natiivi CSS käsittelee "&" ja sen jälkeistä osaa kahtena erillisenä valitsimena. Tämän seurauksena se yrittää tehdä yhdistevalitsimen, joka ei anna samaa tulosta.

Tämä esimerkki toimii kuitenkin alkuperäisessä CSS: ssä:

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

Tämä toimii, koska ensimmäinen valitsin on sama kuin nav.nav-list tavallisessa CSS: ssä, ja toinen on sama kuin nav.nav-link. Välilyönnin lisääminen "&":n ja valitsimen väliin vastaa kirjoittamista nav .nav-list.

Alkuperäisessä CSS: ssä, jos käytät et-merkkiä näin:

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

Se on sama kuin tämän kirjoittaminen:

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

Tämä saattaa tulla sinulle yllätyksenä, kun otetaan huomioon, että molemmat __nav-lista ja __nav-linkki ovat sisällä .nav valitsin. Mutta et-merkki asettaa sisäkkäiset elementit emoelementin eteen.

Spesifisyys voi olla erilainen

Toinen huomionarvoinen asia on vaikutus spesifisyyteen, jota ei tapahdu Sassissa, vaan se tapahtuu alkuperäisessä CSS-sisäkkäisyydessä.

Oletetaan siis, että sinulla on a ja an elementti. Seuraavalla CSS: llä an jommassakummassa näistä elementeistä käyttää serif-fonttia:

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

Yllä olevan Sass-koodin käännetty versio on seuraava:

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

Mutta sama sisäkkäissyntaksi alkuperäisessä CSS: ssä tuottaa erilaisen tuloksen, käytännössä saman kuin:

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

The On() valitsin käsittelee spesifisyyssääntöjä hieman eri tavalla kuin Sass-nesting. Periaatteessa erityispiirteet:On() päivitetään automaattisesti tarkimpaan kohtaan argumenttiluettelossa.

Elementtien järjestys saattaa muuttaa valittua elementtiä

Sisäkkäisyys alkuperäiseen CSS: ään voi muuttaa täysin valitsimen todellisen merkityksen (eli valitsee täysin eri elementin).

Harkitse esimerkiksi seuraavaa HTML-koodia:

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

Ja seuraava CSS:

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

Tämä on tulos, jos käytät Sassia CSS-kääntäjänä:

Nyt HTML-lohkossa, jos siirrät luokan kanssa tumma teema sen sisällä kehotus toimintaan, se rikkoisi valitsimen (Sass-tilassa). Mutta kun vaihdat tavalliseen CSS: ään (eli ilman CSS-esiprosessoria), tyylit toimivat edelleen.

Tämä johtuu tavasta, jolla :On() toimii konepellin alla. Joten yllä oleva sisäkkäinen CSS käännetään seuraavaksi tavalliseksi CSS: ksi:

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

Tämä määrittää a .otsikko joka on molempien jälkeläinen .tumma teema ja .kehotus toimintaan. Mutta näiden järjestyksellä ei ole oikeastaan ​​väliä. Niin kauan kuin .otsikko on jälkeläinen .kehotus toimintaan ja .tumma teema, se toimii kummassa tahansa järjestyksessä.

Tämä on reunatapaus, johon et törmää niin usein. Mutta ymmärtäen :On() valitsimen taustalla olevat toiminnot voivat auttaa hallitsemaan, kuinka sisäkkäisyys toimii CSS: ssä. Tämä myös tekee CSS-virheenkorjaus paljon helpompi.

Opi käyttämään Sassia Reactissa

Koska Sass kääntää CSS: ään, voit käyttää sitä käytännössä minkä tahansa käyttöliittymäkehyksen kanssa. Voit asentaa CSS-esiprosessorin Vue-, Preact-, Svelte- ja – tietysti – React-projekteihin. Sassin asennusprosessi kaikille näille kehyksille on myös melko yksinkertainen.

Sassin käytön suurin etu Reactissa on, että sen avulla voit kirjoittaa puhtaita, uudelleenkäytettäviä tyylejä käyttämällä muuttujia ja sekoituksia. React-kehittäjänä Sassin käytön tunteminen auttaa sinua kirjoittamaan selkeämpää, tehokkaampaa koodia ja tekemään sinusta kaiken kaikkiaan paremman kehittäjän.