Articles
Introduzione a SASS/SCSS
La funzione `if` in SASS

La funzione `if` in SASS

Questo articolo spiega la funzione if in SASS.

Esamineremo tutto, dalle basi della funzione if alle tecniche avanzate, passo dopo passo.

YouTube Video

La funzione if in SASS

La funzione if() è una semplice funzione condizionale fornita da SASS che restituisce uno di due valori in base a una condizione booleana. È simile all'operatore ternario di JavaScript.

Sintassi

La sintassi è la seguente:.

1// if(condition, trueValue, falseValue)
  • Se condition è true, restituisce trueValue; se è false, restituisce falseValue.

Uso di base

Ad esempio, puoi usare la funzione if() per cambiare i colori di sfondo e del testo a seconda che il tema sia scuro o chiaro.

Codice di esempio 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Se la variabile $theme è "dark", lo sfondo diventa nero con testo bianco; se è "light", lo sfondo diventa bianco con testo nero.

Il CSS generato 

1body {
2  background-color: black;
3  color: white;
4}
  • Poiché la variabile $theme è "dark", lo sfondo è nero con testo bianco.

Differenze tra l'istruzione @if e la funzione if()

Sass mette a disposizione un'istruzione @if e una funzione if() per la ramificazione condizionale, ma vengono usate per scopi diversi.

Codice di esempio 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • L'istruzione @if controlla quale codice viene generato in fase di compilazione di Sass.
  • Al contrario, la funzione if() restituisce un valore ed è usata per selezionare dinamicamente i valori all'interno delle espressioni.

Il CSS generato 

1body {
2  background-color: black;
3  color: white;
4}
  • In questo esempio, poiché $theme è "dark", vengono applicati uno sfondo nero e un colore del testo bianco.
  • Le due principali differenze sono che l'istruzione @if controlla la struttura, mentre la funzione if() restituisce un valore.

Uso di funzioni if annidate

Quando hai bisogno di ramificazioni complesse, puoi annidare funzioni if.

Codice di esempio 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Se $theme è "dark", restituisce il nero; se è "light", restituisce il bianco; altrimenti restituisce il valore predefinito ($custom-color).

Il CSS generato 

1body {
2  background-color: blue;
3}
  • Poiché la variabile $theme è custom, il colore di sfondo è blu.

Casi d'uso pratici

Cambio del tema

Di seguito un esempio che cambia gli stili dei pulsanti in base al tema.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Questo codice è un esempio di condizionali SASS che commuta i colori di sfondo, testo e bordo di un pulsante in base al valore della variabile $theme. La funzione if() viene utilizzata per impostare dinamicamente gli stili per i temi scuro e chiaro.

Il CSS generato 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Cambiando il tema, puoi modificare in modo uniforme l'intero design.

Esempio avanzato: impostazione dinamica del contrasto dei colori

Vediamo un esempio che imposta automaticamente il colore del testo in base al colore di sfondo.

Codice di esempio 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • La funzione color.channel() è usata per ottenere la luminosità (lightness) del colore di sfondo. Se quel valore è maggiore di 50%, viene scelto il nero; se è minore, viene scelto il bianco come colore del testo, ottimizzando automaticamente il contrasto con lo sfondo.

Il CSS generato 

1body {
2  background-color: #000;
3  color: white;
4}
  • Usando la funzione if() è possibile implementare stili flessibili che tengano conto dell'accessibilità del design, come l'adeguamento del contrasto.

Combinare con @function

Usare la funzione if all'interno di una @function consente una progettazione degli stili ancora più flessibile.

Codice di esempio 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Questo codice dimostra l'uso di if() all'interno di una @function per restituire colori appropriati in base al tema e al tipo di colore. Ciò consente una progettazione degli stili coerente e riutilizzabile per ciascun tema.

Il CSS generato 

1body {
2  background-color: black;
3  color: white;
4}
  • Creando e usando funzioni di supporto che sfruttano la funzione if(), è possibile migliorare la manutenibilità dell'intero progetto.

Note

  1. La funzione if non può essere usata con valori dinamici Poiché il CSS è di per sé un linguaggio statico, la funzione if determina i valori al momento della compilazione di SASS. Per la logica condizionale in fase di esecuzione, è necessario usare JavaScript.

  2. Dai priorità alla leggibilità Poiché le funzioni if annidate possono diventare complesse e compromettere la leggibilità, è possibile utilizzare SASS @mixin e @function secondo necessità per organizzare il codice.

Conclusione

La funzione if di SASS è uno strumento potente che restituisce valori diversi a seconda delle condizioni. È utile non solo per semplici condizioni, ma anche in molti scenari come il cambio del tema e le impostazioni dinamiche degli stili. Tuttavia, quando si gestiscono condizioni complesse, presta attenzione alla leggibilità e sfrutta @mixin e @function per migliorare la manutenibilità.

Padroneggiando la funzione if, puoi ottenere una progettazione degli stili più efficiente e flessibile.

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

YouTube Video

Condizionali in SASS