0Pricing
CSS Academy · Lezione

Funzioni e flusso di controllo Sass

Scriva logica CSS dinamica utilizzando le funzioni integrate di Sass e le direttive @if, @each e @for.

Funzioni e flusso di controllo Sass è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Funzioni integrate di Sass

Sass offre numerose funzioni integrate per la manipolazione dei colori, i calcoli matematici, le operazioni sulle stringhe e altro. Vengono eseguite al momento della compilazione.

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

Funzioni per i colori

Principali funzioni Sass per i colori:

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

Funzioni personalizzate con @function

Definisca funzioni riutilizzabili che restituiscono valori, non regole CSS:

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

Controllo del flusso con @if @else

Produca CSS in modo condizionale in base ai valori delle variabili:

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

Ciclo @each

Iteri su un elenco o una mappa per generare più regole:

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

Ciclo @for

Generi CSS per un intervallo di valori:

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

Ciclo @while

Ripeta le istruzioni finché una condizione è vera. Lo utilizzi con moderazione: @each e @for coprono la maggior parte dei casi:

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

Mappe Sass

Le mappe sono strutture di dati chiave-valore in Sass:

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

@error @warn @debug

Sass offre tre funzioni diagnostiche:

  • @error: interrompe la compilazione e visualizza un messaggio
  • @warn: registra un avviso senza interrompere la compilazione
  • @debug: registra un valore durante lo sviluppo

Interpolazione #{...}

Utilizzi #{$variable} per inserire i valori delle variabili nei selettori, nei nomi delle proprietà o nelle media query:

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

Verifica rapida

Qual è la differenza tra un @mixin Sass e una @function Sass?

Riepilogo

Le funzioni Sass integrate per i colori (darken, lighten, mix) consentono di manipolare i colori in fase di compilazione. Una @function personalizzata restituisce un valore calcolato. @if/@else aggiunge un output condizionale. @each scorre liste e mappe. @for scorre intervalli numerici. Queste funzionalità consentono di creare fogli di stile potenti e DRY, con il minimo della ripetizione.

Domande Frequenti

La lezione «Funzioni e flusso di controllo Sass» è gratuita?

Sì — il testo completo di «Funzioni e flusso di controllo Sass» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Funzioni e flusso di controllo Sass»?

Scriva logica CSS dinamica utilizzando le funzioni integrate di Sass e le direttive @if, @each e @for. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Funzioni e flusso di controllo Sass»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Variabili, nesting e partial
  2. Mixin e inclusioni
  3. Selettori extend e placeholder
  4. Funzioni e flusso di controllo Sass
← Torna a CSS Academy