24 Ottobre 2016

Cos'è?

Sass (Syntactically Awesome StyleSheets) è un linguaggio di estensione per il CSS.
Con Sass è possibile scrivere codice CSS pulito, sostenibile e risolvere i problemi di ripetizione e di manutenzione comuni presenti nei tradizionali CSS.
Oltre ad essere una competenza preziosa per qualsiasi sviluppatore front-end, la transizione dal CSS a Sass è abbastanza liscia grazie alla sintassi familiare.

Come funziona?

Sass non può essere direttamente interpretato dal browser, quindi, per fare in modo che il browser lo possa capire, deve essere prima convertito, o compilato, in CSS regolare.
Per Compilazione intendiamo la conversione del nostro codice in un codice di livello inferiore, in modo che possa essere eseguito. Compilando l’SCSS in CSS, il file potrà essere interpretato dal browser ed i risultati appariranno su una pagina web.

Alcuni concetti di base

Sass ha molti vantaggi che ci permettono di scrivere codice leggibile e succinto. In questo articolo analizzeremo tre dei concetti principali che rendono Sass un valido strumento:
1. Nesting
2. Mixin
3. Variables

Nesting

Il Nesting è il processo con cui mettiamo dei selettori all’interno del contesto(scope) di altri selettori.
I selettori che sono annidati(nested) all'interno dello scope di un altro selettore sono indicati come child, mentre quelli all'esterno vengono indicati come parent (proprio come nella relazione tra elementi HTML).

.parent {
  color: blue;  
  .child {
  color: red;  
  }  
}  

Il Nesting consente di vedere chiaramente il rapporto DOM tra due selettori, eliminando anche la ripetizione che si ha nel CSS.
Con Sass si può evitare di ripetere il genitore più e più volte e anche evitare di definire ogni selettore in modo indipendente.

Variables

Le variabili in Sass permettono di assegnare un valore specifico ad un identificatore di nostra scelta. Perché è così utile? Diversamente dal CSS, se è necessario modificare un valore, dovremo aggiornarlo solo in un posto e la modifica si rifletterà in più situazioni.
In Sass $ viene utilizzato per definire e fare riferimento a una variabile:

$translucent-white: rgba(255,255,255,0.3);

Definiamo una variabile $translucent-white e gli assegnamo un valore. Per riferirci ad essa, ad esempio all’interno di un elemento a cui desideriamo dare queste caratteristiche, scriveremo:

background-color: $translucent-white; 

Mixin

In aggiunta alle variabili e al nesting, in Sass esistono dei multiple constructs che riducono le ripetizioni: i mixin.
Un mixin permette di effettuare gruppi di dichiarazioni CSS che si desiderano riutilizzare in tutto il sito. Inoltre i mixin hanno anche la capacità di prendere dei parametri (argument) e di utilizzarli nel mixin stesso e addirittura di dargli un valore di default. Eccone un esempio:

@mixin backface-visibility($visibility:hidden) {
   backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

CSS with superpowers

Questo è solo un assaggio di ciò che può fare Sass, se siete interessati all'argomento, qui potete leggere la documentazione ufficiale.
Inoltre Sass è attivamente sostenuto e sviluppato da un consorzio di diverse società tech e da una community di centinaia di sviluppatori.