Nello script precedente abbiamo trattato i precompilatori HTML che ci permettono di scrivere meno codice e ottenere lo stesso risultato. Questi strumenti nascono dove il linguaggio segue determinati standard e la cui replicabilità risulta facilmente ottenibile tramite la creazione di regole che vanno ad astrarre le principali. Il CSS contiene già molte metodologie che ci consentono di scrivere meno, l'esempio seguente mostra lo stesso selettore declinato in più varianti.

div[class="test"] {}
div.test {}
.test {}

Quindi perchè creare dei precompilatori CSS, se già il linguaggio ci offre tutto quello di cui abbiamo bisogno? Il motivo è presto detto: il CSS non ha una grammatica gerarchica, non è quindi come HTML, dove per creare un legame padre-figlio tra gli elementi, basta includere il figlio tra il tag di apertura e quello di chiusura del padre. Per poter creare un insieme di regole tra elementi che hanno una particolare grado di parentela occorre scrivere molto, e riscrivere altrettante volte gli stessi selettori.

.test { background-color: yellow; }
.test > .contenuto { background-color: blue; }
.test > .contenuto.orange { background-color: orange; }
.test > .contenuto p > span { font-size: 10px; }
.test > .contenuto > label { font-size: 15px;}
.test > .contenuto.orange > label { color: red; }

Il codice precedente evidenzia la fragilità a lungo termine della sintassi CSS, se in un futuro la classe contenuto dovesse cambiare nome, dovrei stare attento ad apportare la modifica ovunque. Capire il giusto selettore, all'interno del quale applicare una modifica, non è sempre così banale, soprattutto in presenza di molti stili ed elementi. Per porre rimedio a questo problema possiamo utilizzare dei linguaggi che estendono quello CSS, consentendoci di scrivere codice più pratico e funzionale.

Troviamo varie scelte anche nel campo della precompilazione CSS: possiamo orientarci verso il linguaggio Less (http://lesscss.org/), in origine adottato anche da Bootstrap 3, oppure utilizzare il più conosciuto SCSS(https://sass-lang.com/guide), da cui poi otteniamo il Sass, un linguaggio molto stringato, che non prevede la necessità di utilizzare parentesi graffe o punti e virgola, dato che la traduzione è effettuata basandosi sulle tabulazioni.

In questo script prenderemo in esame SCSS, il quale differisce da Less solamente per piccole regole, quali dichiarazioni, estensioni, funzioni. Il Sass, rimuovendo la parte caratteristica del CSS, cioè le parentesi graffe, a volte risulta di difficile lettura e comprensione, richiedendo anche l'utilizzo di una corretta spaziatura tra gli elementi.

Setup del precompilatore

# verifica installazione
npm --version

# installazione compilatore SCSS/Sass
npm install -g sass 

Per avviare la compilazione basterà quindi eseguire i seguenti comandi.

# singolo file
sass --watch input.scss output.css

# cartelle
sass --watch input/sass:output/stylesheets

Sintassi SCSS

.test { 
    background-color: yellow; 
    > .contenuto { 
        background-color: blue;
        &.orange { 
            background-color: orange;
            > label { 
                color: red; 
            }
        }
        p > span { 
            font-size: 10px; 
        }
        > label { 
            font-size: 15px;
        }
    }
}

Apparentemente più complesso, ma di facile comprensione: ogni elemento figlio viene posto all'interno del padre, utilizzando la stessa sintassi CSS

.test { background-color: yellow; }
.test > .contenuto { background-color: blue; }

.test { 
    background-color: yellow; 
    > .contenuto { 
        background-color: blue;
    }
}

Nel caso in cui il selettore abbia bisogno di una specifica ulteriore sull'ultimo elemento, possiamo utilizzare il carattere &.

.test > .contenuto { background-color: blue; }
.test > .contenuto.orange { background-color: orange; }

.test > .contenuto { 
    background-color: blue;
    &.orange { 
        background-color: orange;
    }
}

Vi è inoltre la possibilità di utilizzare operatori, creare variabili e classi comuni da cui estendere.

// variabile
$primary-color: yellow;

// classe base
%full-width {
    //operatore
    width: 600px / 960px <i> 100%;
    margin: 0;
}

.test { 
    background-color: $primary-color;
    @extend %full-width;
}

Possiamo costruire delle funzioni, o più propriamente mixins, che permettano la creazione di stili tramite variabili

@mixin transform($property) {
  transform: $property;
}
.box { @include transform(rotate(30deg)); }


.box {
  transform: rotate(30deg);
}

Un ulteriore vantaggio che otteniamo dalla compilazione è l'accorpamento dei selettori con stili simili e la produzione di un file minificato, questo ci garantisce una grande libertà nella fase di scrittura, sapendo che il prodotto finito sarà sempre strutturato al meglio per la fruizione da browser.