CSS Academy · leksjon

Variabler, nøsting og partials

Bruk Sass-variabler for gjenbrukbare verdier, nøst selektorer for bedre lesbarhet, og del koden opp i partials.

Leksjon 1 av 413 trinn

Variabler, nøsting og partials er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er Sass?

Sass (Syntactically Awesome Stylesheets) er en CSS-preprosessor som utvider CSS med variabler, nøsting, mixiner, funksjoner og mer. Sass-filer kompileres til standard CSS.

To Sass-syntakser

Sass har to filformater:

.scss — CSS-kompatibel supersyntaks (mest populær)
.sass — syntaks basert på innrykk (uten krøllparenteser eller semikolon)

Dette kurset dekker SCSS.

Sass-variabler

Sass-variabler bruker prefikset $. De fastsettes ved kompilering — i motsetning til egendefinerte CSS-egenskaper er de ikke aktive i nettleseren.

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

Sass-variabler kontra egendefinerte CSS-egenskaper

Viktige forskjeller:

Sass-variabler: ved kompilering, ikke i nettleseren, kan ikke endres under kjøring
Egendefinerte CSS-egenskaper: aktive i nettleseren, kan endres av JS, tar hensyn til kaskaden

Moderne praksis: bruk begge. Sass-variabler for logikk ved bygging, og egendefinerte CSS-egenskaper for tematisering under kjøring.

Nesting

Sass tillater nøsting av selektorer inni hverandre, slik at strukturen speiler HTML-en. Det kompilerte resultatet bruker etterkommerselektorer.

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

&-selektoren

& viser til den overordnede selektoren og muliggjør BEM-lignende mønstre og tilstandsselektorer:

<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

Advarsel om nøstingsdybde

Unngå nøsting på mer enn tre nivåer. Dyp nøsting gir altfor spesifikke selektorer og gjør CSS-en lite robust. Hvis du stadig må nøste dypt, trenger CSS-arkitekturen sannsynligvis refaktorering.

Sass-partialer

En partial er en Sass-fil hvis navn begynner med en understrek (_card.scss). Partialer kompileres ikke separat — de må importeres i en annen fil. Dette hindrer at det genereres uønskede CSS-utdatafiler.

@use for import

Moderne Sass bruker @use til å importere partialer. Det gir navnerom som hindrer variabelkonflikter:

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

@forward for biblioteker

@forward eksporterer medlemmene i en modul på nytt, slik at de kan brukes av filer som importerer biblioteket ditt:

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

Eldre @import (utfaset)

Det eldre direktivet @import er faset ut i Dart Sass. Migrer til @use og @forward for bedre navnerom og ytelse.

Hurtigsjekk

Hvilken CSS-selektor genererer Sass fra nøstingen .nav { .link { color: white; } }?

Besvar den i den interaktive leksjonen

Oppsummering

Sass-variabler ($name) fastsettes ved kompilering. Nøsting speiler HTML-strukturen, men unngå å gå dypere enn tre nivåer. & viser til den overordnede selektoren for pseudoklasser, tilstander og BEM-modifikatorer. Partialer (_file.scss) importeres, men kompileres ikke direkte. Bruk @use (ikke @import) for moderne lasting av Sass-moduler.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Variabler, nøsting og partials» gratis?

Ja – hele teksten i «Variabler, nøsting og partials» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Variabler, nøsting og partials»?

Bruk Sass-variabler for gjenbrukbare verdier, nøst selektorer for bedre lesbarhet, og del koden opp i partials. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Variabler, nøsting og partials»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til CSS Academy