Funzioni SASS

Questo articolo spiega le funzioni SASS.

Spiegheremo approfonditamente le funzioni SASS, dai concetti di base agli argomenti avanzati, inclusi esempi pratici utili per il lavoro reale.

YouTube Video

Funzioni SASS

Le funzioni SASS sono strumenti potenti che racchiudono logiche riutilizzabili nei fogli di stile, permettendo calcoli, formattazione e diramazioni condizionali.

Struttura di base e utilizzo delle funzioni

Le funzioni SASS vengono definite con @function e restituiscono un valore usando @return. Le funzioni vengono chiamate nello stesso modo delle funzioni integrate.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Questo codice definisce una funzione che raddoppia un numero e lo applica alla larghezza. Di conseguenza, sarà generato .example { width: 20px; }.

Argomenti, valori predefiniti e gestione dei tipi

Le funzioni possono accettare più argomenti e impostare valori predefiniti. SASS non applica il tipaggio statico, ma prestare attenzione ai formati degli argomenti rende le tue funzioni più robuste.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font ha valori predefiniti per scale e unit, e alcuni argomenti possono essere omessi quando viene chiamata. In questo esempio, verrà generato un valore come font-size: 20px;.

Utilizzo degli argomenti variadici (...)

Usa argomenti variadici se vuoi passare più valori. Questo è utile per gestire liste o più colori.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Un argomento variadico come $numbers... viene trattato come una lista e può essere elaborato usando @each. In questo esempio, verrà generato padding: 20px;.

Restituzione e manipolazione di liste o mappe

Le funzioni possono anche restituire liste (separate da spazi o virgole) e mappe. Questo è utile per restituire valori complessi.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• La funzione restituisce una mappa e poi i valori vengono recuperati con map.get. Questo ti permette di mantenere un sistema di spaziatura coerente.

Funzioni con condizionali e cicli

@if, @else if, @else, @for, @each e @while possono essere usati all'interno delle funzioni. Puoi creare logiche di calcolo con condizionali e cicli.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Questa funzione calcola una scala modulare e moltiplica o divide a seconda se i passaggi sono positivi o negativi. modular-scale(3, 1rem, 1.333) restituisce una dimensione del font tre passi sopra la base.

Gestione degli errori e avvisi (@error, @warn)

Puoi interrompere con @error se ci sono argomenti non validi o operazioni inaspettate e segnalare avvisi con @warn. Lo scopo è avvisare gli utenti dei problemi in anticipo.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Se passi valori non validi, verrà generato un errore durante la build, facilitando l'identificazione della causa. I controlli all'interno delle funzioni sono utili per identificare precocemente i bug.

Creazione di funzioni specifiche per i colori

In SASS, puoi combinare diverse funzioni che manipolano i colori per creare la tua palette di colori. Questo è utile per gestire uno schema di colori coerente in tutto il tuo progetto.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• In questo esempio, color.mix viene utilizzato per creare sfumature mescolando con il nero e tinte mescolando con il bianco. I valori vengono restituiti in una lista e possono essere accessibili utilizzando list.nth.

Note su prestazioni e tempi di compilazione

Le funzioni SASS vengono valutate al momento della compilazione. Cicli pesanti, ricorsioni profonde o operazioni estese sulle mappe aumenteranno i tempi di compilazione. Mantieni le funzioni piccole e semplici; valuta di gestire elaborazioni complesse fuori da SASS, in strumenti di build o preprocessori, se necessario.

Collezione pratica di funzioni utili

Ecco alcune funzioni utilitarie comunemente usate. Il codice è progettato per essere subito utilizzabile in progetti reali.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value impone limiti superiori e inferiori a un valore, e px-to-rem converte i valori in pixel in rem. Entrambe queste funzioni semplificano processi che si presentano spesso nel design responsive.

Selezionare tra @function e mixin (@mixin)

Le funzioni sono specializzate nel restituire valori, mentre i mixin producono blocchi CSS. Se il risultato della logica è un singolo valore di proprietà, usa una funzione; se è un intero blocco di stile, usa un mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Le funzioni restituiscono valori come numeri o colori da usare in altre proprietà, mentre i mixin inseriscono direttamente gruppi di proprietà. Una netta separazione nella progettazione aumenta la manutenibilità.

Manipolazione delle stringhe e considerazioni sul formato di output

Fai attenzione quando gestisci numeri con unità e stringhe in SASS. Concatenare una stringa a un numero con un'unità può produrre un output indesiderato. Usa unquote() o l'interpolazione delle stringhe (#{}) se necessario.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Quando restituisci percentuali come stringhe, gestisci la precisione usando l'interpolazione o round per maggiore chiarezza. Per evitare bug, gestisci sempre chiaramente i tipi di dati quando concateni risultati di calcoli con stringhe.

Migliori pratiche per testing e documentazione

Dopo aver scritto una funzione, crea piccoli file SCSS con esempi d'uso come test, così la manutenzione sarà più facile. Puoi documentare per ogni funzione il tipo/unità di input, il tipo di ritorno, il comportamento in caso di errore e gli esempi d'uso.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Lasciare commenti con piccoli esempi di 'output atteso' rende più facile individuare regressioni durante futuri refactoring. Compilare automaticamente in un ambiente CI e controllare visivamente il risultato è efficace.

Riepilogo

Le funzioni SASS sono un modo potente per aumentare la riusabilità e la coerenza negli stili. Progettale per essere piccole e semplici, e garantisci la sicurezza utilizzando @error e @warn. Le funzioni utilitarie per colori, spaziature e conversione di unità sono comode da consolidare in una libreria condivisa. Per evitare un carico di compilazione eccessivo, valuta di separare le elaborazioni complesse in altri passaggi della build quando necessario.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video