CSS Academy · leksjon

Sass-funksjoner og kontrollflyt

Skriv dynamisk CSS-logikk ved hjelp av Sass' innebygde funksjoner og direktivene @if, @each og @for.

Leksjon 4 av 412 trinn

Sass-funksjoner og kontrollflyt er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 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.

Innebygde Sass-funksjoner

Sass tilbyr mange innebygde funksjoner for fargejustering, matematikk, strengoperasjoner og mer. Disse kjøres ved kompilering.

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

Fargefunksjoner

Viktige Sass-fargefunksjoner:

darken($color, $amount)
lighten($color, $amount)
saturate($color, $amount)
mix($color1, $color2, $weight)
rgba($color, $alpha)
color.scale($color, $lightness: 20%)

Egendefinerte funksjoner med @function

Definer gjenbrukbare funksjoner som returnerer verdier (ikke CSS-regler):

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

Kontrollflyt med @if @else

Produser CSS betinget av variabelverdier:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

@each-løkke

Iterer over en liste eller et kart for å generere flere regler:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

@for-løkke

Generer CSS for et verdiintervall:

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

@while-løkke

Gjør en løkke så lenge en betingelse er sann. Bruk den med måte — @each og @for dekker de fleste tilfeller:

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

Sass-kart

Kart er datastrukturer med nøkkel–verdi-par i Sass:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass tilbyr tre diagnostikkfunksjoner:

@error: stopper kompileringen med en melding
@warn: logger en advarsel uten å stoppe
@debug: logger en verdi under utvikling

Interpolering #{...}

Bruk #{$variable} for å sette inn variabelverdier i selektorer, egenskapsnavn eller mediespørringer:

<p class="element">Interpolated property (#{$property})</p>

Kort sjekk

Hva er forskjellen mellom en Sass @mixin og en Sass @function?

Besvar den i den interaktive leksjonen

Oppsummering

Sass' innebygde fargefunksjoner (darken, lighten, mix) gjør det mulig å endre farger under kompileringen. En egendefinert @function returnerer en beregnet verdi. @if/@else legger til betinget output. @each itererer over lister og maps. @for itererer over tallintervaller. Disse funksjonene gjør det mulig å lage kraftige og DRY-stilark med minimal gjentakelse.

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 «Sass-funksjoner og kontrollflyt» gratis?

Ja – hele teksten i «Sass-funksjoner og kontrollflyt» 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 «Sass-funksjoner og kontrollflyt»?

Skriv dynamisk CSS-logikk ved hjelp av Sass' innebygde funksjoner og direktivene @if, @each og @for. 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 4 av 4.

Hvor lang tid tar leksjonen «Sass-funksjoner og kontrollflyt»?

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