Condizionali in SASS

Questo articolo spiega i condizionali in SASS.

Spieghiamo in modo chiaro tutto, dalle basi agli usi avanzati dei condizionali con le direttive @if, @else if e @else, con esempi pratici.

YouTube Video

Condizionali in SASS

SASS è un linguaggio di fogli di stile che estende CSS e consente di controllare gli stili in modo flessibile utilizzando i condizionali. In SASS è possibile usare @if, @else if e @else per modificare l'output degli stili in fase di compilazione.

Sintassi di base dei condizionali

I condizionali di base in SASS si scrivono con la seguente sintassi.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if valuta la prima condizione e, se è falsa, vengono valutati in ordine i blocchi @else if o @else.

Esempio semplice di condizionale

Nel seguente esempio, il colore di sfondo cambia in base alla variabile $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

CSS compilato

1body {
2  background-color: #333;
3  color: #fff;
4}

• Quando $theme è "dark", vengono applicati uno sfondo scuro e un colore del testo bianco.

Combinare i condizionali con i calcoli

I condizionali gestiscono non solo confronti di stringhe e colori, ma anche calcoli numerici.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

CSS compilato

1.container {
2  max-width: 1200px;
3}

• Sono possibili anche confronti numerici e, quando $width supera 1000px, viene generato max-width: 1200px.

Condizionali annidati

Annidando i condizionali è possibile esprimere condizioni complesse.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

CSS compilato

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Annidare i condizionali consente di applicare stili in base sia al tema sia alla dimensione.

Uso dei condizionali nelle funzioni personalizzate

Usare i condizionali all'interno di funzioni personalizzate può migliorare la riutilizzabilità.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

CSS compilato

1.card {
2  background-color: #333;
3}

• Incapsulando i condizionali nelle funzioni, si aumentano riutilizzabilità e manutenibilità.

Esempio pratico - Cambio di design

Vediamo un esempio di cambio del design complessivo in base a determinate condizioni.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

CSS compilato

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• È possibile cambiare dinamicamente la combinazione di colori dell'intera pagina in base alla variabile del tema.

Note e buone pratiche

Quando si utilizzano i condizionali di SASS, è possibile considerare i seguenti punti.

1. Mantieni i condizionali semplici

   Un annidamento complesso compromette la leggibilità; sfruttare funzioni e mixin aiuta a mantenere le cose semplici.

2. Astrai con variabili e funzioni

   Se usi condizioni simili in più punti, consolidarle in variabili o funzioni ne migliora la manutenibilità.

3. Evita una logica eccessiva

   Uniforma il più possibile le regole di design ed evita l'uso eccessivo dei condizionali.

Conclusione

I condizionali in SASS sono uno strumento molto efficace per creare stili flessibili e dinamici. Qui abbiamo spiegato tutto passo dopo passo, dalle basi agli esempi pratici. Quando usi i condizionali in progetti reali, progetta con la riutilizzabilità del codice in mente, facendo attenzione a non complicare eccessivamente le cose.

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

YouTube Video