CSS: le variabili in SASS

Le variabili in SASS rappresentano un modo semplice ed efficace per riutilizzare valori comuni a più componenti dei nostri fogli di stile.

Una variabile viene definita attraverso la sintassi $variabile: valore;. Il suo valore può essere un qualsiasi valore CSS valido, come colori, font o URL.

$main-bg-color: #fff;
$main-font-size: 16px;

Le variabili solitamente vengono inserite in un file parziale (ad esempio _variables.scss) che poi può essere incluso mediante la direttiva @import. L'underscore usato nel nome di questi file parziali istruisce l'interprete SASS a non considerare questi file come file CSS autonomi, ma solo come parte di un file principale.

@import 'variables';

html {
    font-size: $main-font-size;
}

body {
    background: $main-bg-color;
}    

Una volta compilato, il file CSS apparirà così:

html {
    font-size: 16px;
}

body {
    background: #fff;
}    

Sulle variabili è possibile compiere anche semplici operazioni matematiche.

$main-bg-color: #fff;
$main-font-size: 16px;
$main-line-height: $main-font-size * 1.5;

La terza variabile definita sopra verrà compilata come segue.

body {
    line-height: 24px;
}  

Le variabili definite globalmente possono essere ulteriormente manipolate localmente.

@import 'variables';

h1, h2, h3, h4, h5, h6 {
    line-height: $main-line-height / 1.5;
}

In questo caso il CSS compilato sarà:

h1, h2, h3, h4, h5, h6 {
    line-height: 16px;
}

Come si può notare, l'uso delle variabili permette di modificare molto rapidamente e a cascata tutti gli stili principali di un file CSS.