SASS il preprocessore CSS

SASS è l'acronimo di Syntactically Awesome Style Sheets ossia fogli di stile sintatticamente fantastici, è possibile effettuare l'installazione mediante CLI usando il comando npm, per sapere come utilizzare questo comando sui diversi SO fare riferimento alla guida

npmjs.com/get-npm

pertanto se abbiamo installato npm sul nostro SO, installiamo SASS lanciando il seguente comando

npm install -g sass

se l'installazione è andata a buon fine è possibile usare il comando sass, ad esempio per vedere la versione installata basta lanciare il comando --version

sass --version

output 

1.34.1 compiled with dart2js 2.13.1

per visualizzare la lista dei comandi disponibili invece si usa --help o -h

sass -h

La creazione di un foglio di stile partendo da un file .scss avviene tramite CLI, in particolare bisogna informare SASS da quale file partire per creare e dove salvare i css, ad esempio style.scss è il file da cui viene generato style.css, quindi apriamo un terminale nella posizione in cui è salvato il file style.scss e lanciamo il seguente comando

sass --watch style.scss style.css

e lasciamolo attivo, verranno generati nella stessa posizione i files style.css e style.css.map, quest'ultimo è un file in formato JSON che collega il file css al suo file di origine (in questo caso style.scss), e viene di solito utilizzato per il debug sui file di origine dal web browser, il --watch comando aggiorna automaticamente il foglio di stile css ogni volta che si aggiorna il file .scss.

In questo articolo vedremo cosa sono e come si usano in SASS variabili, nidificazione, moduli, mixin, segnaposti, operatori.

Per definire una variabile si usa il simbolo del dollaro $, ad esempio

style.scss

$font-family: Arial, sans-serif;
$color: #000;

body {
  font: 100% $font-family;
  color: $color;
}

$font-family e $color sono due variabili, la prima è il nome di un font-family mentre l'altra è un colore, se abbiamo attivo il comando --watch possiamo notare che il file style.css è stato aggiornato

style.css

body {
  font: 100% Arial, sans-serif;
  color: #000;
}

/*# sourceMappingURL=style.css.map */

quindi ogni volta che vogliamo usare quel font e quel colore basta usare le relative variabili.

SASS permette di annidare i selettori css con la stessa gerarchia con cui sono annidati in HTML, ecco un esempio di nidificazione con sass

style.scss

.......
.......

nav#navbar {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

il risultato è questo

style.css

........
........

nav#navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav#navbar ul li {
  display: inline-block;
}
nav#navbar ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Per indicare a SASS che per un file .scss non va generato il relativo file css e css.map, bisogna nominarlo con un trattino basso iniziale, questo tipo di file è detto parziale, ad esempio _variabili.scss è un file in cui sono definite tutte le variabili

_variabili.scss

$font-family: Arial, sans-serif;
$color: #000;

per usare questo file in un'altro file .scss si usa la regola @use, questa regola carica un'altro file come modulo, il che è utile per suddividere il nostro lavoro in più file .scss, ad esempio

style.scss

.......
.......

@use 'variabili';

body{
  font: 100% variabili.$font-family;
  color: variabili.$color;
}

come si nota una volta importato il file _variabili.scss per ottenere una variabile si usa la sintassi variabili.$font-family.

Un mixin consente di creare gruppi di dichiarazioni css che potrebbero ripetersi in altre regole css, inoltre è possibile passare dei valori a un mixin, per dichiarare un mixin si usa la regola @mixin, ad esempio

style.scss

.......
.......

@mixin sfondo($colore: cornflowerblue) {
  background: $colore;
  box-shadow: 0 0 1px rgba($colore, .25);
  color: #000;
}

.sfondo1 {
  @include sfondo;
}
.sfondo2 {
  @include sfondo($colore: lavender);
}
.sfondo3 {
  @include sfondo($colore: steelblue);
}

abbiamo creato un mixin nominato sfondo, che usa delle regole css che si ripeteranno nelle classi .sfondo1, .sfondo2, .sfondo3, e inoltre ha un parametro $colore, quindi tramite la regola @include importiamo le regole css anche negli altri sfondi, passando o meno un valore al parametro $colore per definire un background diverso, il risultato è questo

style.css

........
........

.sfondo1 {
  background: cornflowerblue;
  box-shadow: 0 0 1px rgba(100, 149, 237, 0.25);
  color: #000;
}

.sfondo2 {
  background: lavender;
  box-shadow: 0 0 1px rgba(230, 230, 250, 0.25);
  color: #000;
}

.sfondo3 {
  background: steelblue;
  box-shadow: 0 0 1px rgba(70, 130, 180, 0.25);
  color: #000;
}

Un segnaposto è un insieme di regole css che verranno ripetute in altre regole css, un segnaposto se non esteso non verrà incluso nel file css, per definire un segnaposto si usa la sintassi %<nome-segnaposto>, ad esempio

style.scss

........
........

%segnaposto1 {
  border: 1px solid red;
  padding: 8px;
  color: #fff;
}

%segnaposto2 {
  display: nome;
}

.class{
  @extend %segnaposto1;
}

in questo esempio %segnaposto2 non viene stampato nel file css poichè non viene utilizzato, a diffrenza di %segnaposto1 che è utilizzato in .class, il risultato è questo

style.css

........
........

.class {
  border: 1px solid red;
  padding: 8px;
  color: #fff;
}

Gli operatori ci consentono di effettuare operazioni matematiche, vengono indicati con i simboli usuali +, -, *, /, e %, ad esempio

style.scss

........
........

.container {
  float: left;
  width: 600px / 960px * 100%;
}

la classe .container ha una larghezza che viene calcolata tramite un'opportuna operazione, il risultato è questo

style.css

........
........

.container {
  float: left;
  width: 62.5%;
}