CSS Academy · Oppitunti

Muuttujat, sisäkkäisyys ja osatiedostot

Käytä Sass-muuttujia uudelleenkäytettäville arvoille, sisäkkäisiä valitsimia koodin selkeyttämiseen ja jaa koodi osatiedostoihin.

Oppitunti 1/413 vaihetta

Muuttujat, sisäkkäisyys ja osatiedostot on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mikä Sass on

Sass (Syntactically Awesome Stylesheets) on CSS-esikääntäjä, joka laajentaa CSS:ää muuttujilla, sisäkkäisyydellä, mixineillä, funktioilla ja muilla ominaisuuksilla. Sass-tiedostot käännetään tavalliseksi CSS:ksi.

Sassin kaksi syntaksia

Sassilla on kaksi tiedostomuotoa:

.scss — CSS:n kanssa yhteensopiva yläjoukkosyntaksi (suosituin)
.sass — sisennykseen perustuva syntaksi (ei aaltosulkeita tai puolipisteitä)

Tässä kurssissa käsitellään SCSS:ää.

Sass-muuttujat

Sass-muuttujissa käytetään $-etuliitettä. Ne ratkaistaan käännösaikana — toisin kuin CSS:n mukautetut ominaisuudet, niitä ei voi muuttaa selaimessa suorituksen aikana.

<button class="button">Sass Variables</button>

Sass-muuttujat ja CSS:n mukautetut ominaisuudet

Tärkeimmät erot:

Sass-muuttujat: ratkaistaan käännösaikana, eivät ole selaimessa käytettävissä, eikä niitä voi muuttaa suorituksen aikana
CSS:n mukautetut ominaisuudet: ovat aktiivisia selaimessa, JavaScript voi muuttaa niitä ja ne huomioivat kaskadin

Nykykäytännössä käytetään molempia. Sass-muuttujia käytetään koontiajan logiikkaan ja CSS:n mukautettuja ominaisuuksia suorituksenaikaiseen teeman vaihtamiseen.

Sisäkkäisyys

Sassilla voi sisäkkäistää valitsimia toistensa sisään HTML-rakennetta mukaillen. Käännetyssä tulosteessa käytetään jälkeläisvalitsimia.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

&-ylävalitsin

& viittaa ylävalitsimeen, mikä mahdollistaa BEM-tyyppiset rakenteet ja tilavalitsimet:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Varoitus sisäkkäisyyden syvyydestä

Välttäkää yli kolmen tason sisäkkäisyyttä. Syvä sisäkkäisyys tuottaa liian tarkkoja valitsimia ja tekee CSS:stä hauraan. Jos huomaatte sisäkkäistävänne rakenteita syvälle, CSS-arkkitehtuuri kaipaa todennäköisesti uudelleenjärjestelyä.

Sassin partial-tiedostot

Partial on Sass-tiedosto, jonka nimi alkaa alaviivalla (_card.scss). Partialeja ei käännetä itsenäisesti, vaan ne on tuotava toiseen tiedostoon. Näin vältetään tarpeettomien CSS-tulostetiedostojen luominen.

@use tuonteja varten

Moderni Sass käyttää @use-sääntöä partial-tiedostojen tuomiseen. Se tarjoaa nimiavaruudet muuttujakonfliktien välttämiseksi:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward kirjastoja varten

@forward vie moduulin jäsenet uudelleen, jotta kirjastoasi tuovat tiedostot voivat käyttää niitä:

<span class="badge">Forwarded token (lib.$primary-color)</span>

Vanha @import (vanhentunut)

Vanha @import-direktiivi on vanhentunut Dart Sassissa. Siirtykää käyttämään @use- ja @forward-sääntöjä paremman nimiavaruuksien hallinnan ja suorituskyvyn saavuttamiseksi.

Pikatarkistus

Minkä CSS-valitsimen Sass muodostaa sisäkkäisyydestä .nav { .link { color: white; } }?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Sass-muuttujat ($name) ratkaistaan käännösaikana. Sisäkkäisyys jäljittelee HTML-rakennetta, mutta välttäkää yli kolmen tason syvyyttä. & viittaa ylävalitsimeen pseudoluokkia, tiloja ja BEM-muuntimia varten. Partialeja (_file.scss) tuodaan, eikä niitä käännetä suoraan. Käyttäkää modernissa Sassissa moduulien lataamiseen @use-sääntöä, älkää @import-sääntöä.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Muuttujat, sisäkkäisyys ja osatiedostot” ilmainen?

Kyllä – oppitunnin ”Muuttujat, sisäkkäisyys ja osatiedostot” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Muuttujat, sisäkkäisyys ja osatiedostot”?

Käytä Sass-muuttujia uudelleenkäytettäville arvoille, sisäkkäisiä valitsimia koodin selkeyttämiseen ja jaa koodi osatiedostoihin. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Muuttujat, sisäkkäisyys ja osatiedostot”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy