Variabili SASS

Questo articolo spiega le variabili SASS.

Forniremo una spiegazione dettagliata delle variabili SASS e impareremo il loro utilizzo reale passo dopo passo.

YouTube Video

Variabili SASS

SASS è un linguaggio di estensione del CSS che ti permette di scrivere CSS in modo più flessibile ed efficiente. Tra le sue caratteristiche, le variabili sono uno strumento potente per mantenere la coerenza degli stili e facilitare le modifiche.

Cosa sono le variabili SASS?

Le variabili SASS offrono un modo per memorizzare valori come colori, dimensioni dei font e spaziature utilizzati spesso nel CSS, permettendo di gestirli in un unico posto.

Utilizzando le variabili, puoi cambiare facilmente gli stili e migliorare la leggibilità del codice.

Come scrivere le variabili

Le variabili possono essere scritte come segue.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• È necessario anteporre il simbolo $ al nome della variabile.
• variable-name è il nome della variabile. Si consiglia di assegnare un nome chiaro e descrittivo.
• value è il valore assegnato alla variabile.

Uso di base delle variabili

Di seguito è riportato un esempio base di una variabile SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Una volta definita una variabile come $primary-color, puoi riutilizzare lo stesso valore tutte le volte che vuoi.
• Quando cambi un valore, devi solo modificare la definizione della variabile, migliorando la manutenibilità.

Output CSS generato

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Utilizzo delle variabili all'interno delle annidamenti

Combinare l'annidamento SASS con le variabili aiuta a organizzare il codice e ne facilita la gestione.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Puoi usare le variabili all'interno di selettori annidati.
• Combinando le variabili, puoi ottenere uno stile flessibile, ad esempio rendendo un colore più scuro del 10% usando la funzione color.adjust.

Output CSS generato

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variabili con valori predefiniti

In SASS, puoi impostare valori predefiniti per le variabili. Impostare valori predefiniti ti permette di usare le variabili senza sovrascrivere quelle già esistenti.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Aggiungendo !default, la variabile non verrà sovrascritta se è già definita.
• Questo è utile nello sviluppo di gruppo o per impostazioni a livello di progetto.

Output CSS generato

1p {
2    font-size: 16px;
3}

Ambito delle variabili

Le variabili SASS hanno un ambito e la loro disponibilità dipende da dove sono definite. Comprendere l'ambito aiuta a prevenire la sovrascrittura involontaria delle variabili.

1. Ambito globale

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Le variabili in ambito globale sono disponibili in tutto il file.

2. Ambito locale

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Le variabili in ambito locale sono disponibili solo all'interno di uno specifico annidamento o file.

Utilizzo delle variabili nei calcoli

Le variabili SASS possono essere usate anche nei calcoli. I calcoli possono essere eseguiti anche su valori con unità e colori.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Output CSS generato

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Utilizzare le variabili per regolare i colori o calcolare gli spazi migliora la manutenibilità.

Riepilogo

Le variabili SASS sono una funzione essenziale per una gestione ed una manutenzione efficaci del CSS.

Utilizzare le variabili SASS aiuta a mantenere uno stile coerente in tutto il progetto e rende le modifiche più semplici.

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

YouTube Video