CSS Academy · Lektion

Variabler, nesting og partials

Brug Sass-variabler til genanvendelige værdier, nest selectors for bedre læsbarhed, og opdel koden i partials.

Lektion 1 af 413 trin

Variabler, nesting og partials er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad er Sass?

Sass (Syntactically Awesome Stylesheets) er en CSS-præprocessor, der udvider CSS med variabler, indlejring, mixins, funktioner og meget mere. Sass-filer kompileres til standard-CSS.

To Sass-syntakser

Sass har to filformater:

.scss — CSS-kompatibel supersyntaks (mest udbredt)
.sass — indrykningsbaseret syntaks (ingen krøllede parenteser eller semikoloner)

Dette kursus gennemgår SCSS.

Sass-variabler

Sass-variabler bruger præfikset $. De løses ved kompilering — i modsætning til brugerdefinerede CSS-egenskaber er de ikke dynamiske i browseren.

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

Sass-variabler kontra brugerdefinerede CSS-egenskaber

Vigtige forskelle:

Sass-variabler: ved kompilering, ikke i browseren, kan ikke ændres under kørsel
Brugerdefinerede CSS-egenskaber: aktive i browseren, kan ændres med JS, tager højde for kaskaden

Moderne praksis: Brug begge dele. Sass-variabler til logik ved byggetidspunktet og brugerdefinerede CSS-egenskaber til tematisering under kørsel.

Indlejring

Sass gør det muligt at indlejre selektorer i hinanden, så de afspejler HTML-strukturen. Det kompilerede resultat bruger efterkommerselektorer.

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

&-overordnet selektor

& refererer til den overordnede selektor og gør BEM-lignende mønstre og tilstandsselektorer mulige:

<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 indlejringsdybde

Undgå at indlejre mere end tre niveauer dybt. Dyb indlejring skaber selektorer med en unødigt høj specificitet og gør CSS'en skrøbelig. Hvis du opdager, at du indlejrer meget dybt, har CSS-arkitekturen sandsynligvis brug for refaktorering.

Sass-partials

En partial er en Sass-fil, hvis navn begynder med en understregning (_card.scss). Partials kompileres ikke uafhængigt — de skal importeres i en anden fil. Det forhindrer generering af uønskede CSS-outputfiler.

@use til import

Moderne Sass bruger @use til at importere partials. Det giver navneområder, så variabelkonflikter undgås:

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

@forward til biblioteker

@forward eksporterer et moduls medlemmer igen, så de kan bruges af filer, der importerer dit bibliotek:

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

Ældre @import (forældet)

Direktivet @import er forældet i Dart Sass. Migrér til @use og @forward for bedre navneområder og ydeevne.

Hurtigt tjek

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

Besvar den i den interaktive lektion

Opsummering

Sass-variabler ($name) løses ved kompilering. Indlejring afspejler HTML-strukturen, men undgå at gå dybere end tre niveauer. & refererer til den overordnede selektor for pseudoklasser, tilstande og BEM-modifikatorer. Partials (_file.scss) importeres, men kompileres ikke direkte. Brug @use (ikke @import) til moderne indlæsning af Sass-moduler.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Variabler, nesting og partials” gratis?

Ja — hele teksten til “Variabler, nesting og partials” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Variabler, nesting og partials”?

Brug Sass-variabler til genanvendelige værdier, nest selectors for bedre læsbarhed, og opdel koden i partials. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Variabler, nesting og partials”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy