Sass : ovvero scrivi css con magia.

Adoro Sass.  Ammetto che la prima volta che ne ho sentito parlare la mia esclamazione e’ stata : “WTF?” perche’ mai dovrei usare un preprocessore per i miei css?
Ma poi e’ bastato provarlo una volta per rimanere entusiasta e innamorarsi a prima vista.

Sass e’ una estensione per css cosi come li intendiamo noi. CSS non e’ in linguaggio di programmazione vero e proprio, quello che lo differenzia da linguaggi come ad esempio Javascript e’ la mancanza di variabili, cicli, condizionali,  insomma mancanza di logica.

Qui entra in gioco Sass che permette di estendere css e farne un vero e proprio linguaggio con tutte le “features” classiche dei linguaggi di programmazione, variabili e funzioni su tutto.

In questo articolo voglio spiegare un po’ cosa e’ Sass, i principali vantaggi rispetto allo scrivere css tradizionale e il perche’ e quando conviene usarlo.

Come ho gia’ spiegato sass e una estensione per css, probabilmente la migliore definizione viene dal sito stesso :

“Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”

“Sass rende css un linguaggio divertente. Sass e’ una estensione di CSS3, con aggiunta di regole nidificate, variabili,mixin, eredita’ nei selettori e tanto altro. Viene compilato in uno standard e ben formattato css usando la linea di comando o un qualsiasi plugin”.

Questa ultima parte e’ quella che di solito porta i front end a “rifiutare” inizialmente Sass. Questo perche’ Sass ha bisogno di essere compilato (da qui il preprocessore) e per funzionare ha bisogno che il pc abbia Ruby installato. (ma non solo, e’ possibile usare anche node js, questa e’ un semplice file watcher fatto in nodejs da un mio collega.)

Non mi dilungo sulla installazione di sass, si tratta di un semplice comando o, se avete windows la situazione e’ leggermente diversa, ma il web pullula di esempi su come installare sass, credo che la migliore risorsa sia il sito ufficiale in questo senso.

La prima domanda che nasce spontanea e’ ” Quali sono i vantaggi di utilizzare Sass?
La risposta che mi viene in mente immediata e’ : “Sass rende css un vero linguaggio di programmazione (da qui il fun)“, e vediamo il perche’.

Variabili.

Con Sass e’ possibile usare variabili , facile intuire qua quale sia il grande vantaggio. Prendiamo un css per un grosso progetto fatto qualche anno fa, ora vi tocca rimetterci mano e dovete fare un mega refactoring, e inoltre i colori del brand sono cambiati, bisogna sostituire colori dei link e di tutti gli header.
Mettiamo che abbiamo 1000 differenti link o testi che usano lo stesso colore, come nell’esempio :

a {color : #010101;}
.title {color : #010101;}

e cosi via … per poter cambiare vi tocchera modificare tutte le linee di codice che contengono il colore sopracitato, cosa se invece il valore di quel colore e’ contenuto in una variabile? Facile vero?

$black-color : #010101;

e quindi avremo :

a{color :$black-color;}
.title {color: $black-color;}

Ora bastera’ solo cambiare il valore della variabile e magicamente tutti gli altri valori saranno aggiornati. Comodo vero?

Le variabili non sono l’unico vantaggio di Sass. Un altra “magia” che si puo realizzare con sass sono le funzioni e i mixin, che a prima vista possono sembrare simili ma non lo sono.
La differenza principale e’ questa :

  1. Le funzioni in sass restituiscono un solo risultato.
  2. I mixin restituiscono parti complete di codice.

Funzioni

Le funzioni sono state aggiunte in Sass 3.1.0 mentre i mixin sono da sempre una caratteristica di Sass. La loro grande utilita’ e che ci permette di evitare il DRY (don’t repeat yourself) mentre si scrive codice.

Come ho spiegato le funzioni restituiscono un solo valore, un esempio molto pratico e utile e’ quando si lavora su un sito responsive e si vuole usare la famosa formula :

Target/Context = %.

E vediamo subito un esempio :

@function calc-percent($target, $context) {
    @return calc-percentage($target / $context) * 100%;
 }

questa semplice funzione accetta due parametri passati sottoforma di variabile : $target, $context. Una volta passati i due valori esegue la formula, moltiplicando per 100 in modo da avere la percentuale, e restituisce il risultato.

quindi possiamo richiamare la formula nel nostro css cosi’ :

.responsive {
    width : calc-percentage(400px, 1000px);
 }

e il risultato sara’ :

.responsive {
    width : 40%;
 }

Avrete notato il doppio nome, a prima vista puo’ sembrare confuso, quindi cerco di spiegare. La prima funzione in pratica accetta i parametri, che poi vengono passati alla funzione interna (calc-percentage) che esegue il calcolo restituendo il risultato. potremmo scrivere il nostro css anche cosi’ :

.responsive {
    width : calc-percent(400px, 1000px);
 }

Il risultato e’ lo stesso.

Molte funzioni di “default” sono stati aggiunti a sass dalla versione 3.1, vi rimando alla documentazione ufficiale.
Ecco un esempio con una funzione predefinita di sass :

.gradient {
    background: -webkit-linear-gradient(bottom, darken(#f1f1f1,10%), 
    lighten(#111111,100%));
}

La funzione darken e lighten accettano due parametri, il valore in hex e la percentuale di “degradazione“. Naturalmente darken aggiunge mentre lighten rimuove tonalita’ dal colore, come i nomi stessi suggeriscono.

Mixin.

I mixin sono una delle piu’ grandi comodita’ di sass, soprattutto perche’ evitano di ripetere codice continuamente. In pratica si tratta di una parte di codice che puo’ essere riutilizzata nel nostro documento semplicemente con un include.

Ecco un breve esempio :

@mixin element-margin ($value) {
    margin-top :$value;
 }

e da qui possiamo includerla cosi :

.element {
    @include element-margin(20px);
 }

che dara’ questo rendering :

.element {
 margin-top : 20px;
 }

E’ possibile unire le funzioni e i mixin per sfruttare al pieno le potenzialita’ di sass, ecco una funzione che uso spesso nei miei css e il mixin per richiamarla :

 @function convertRem($size) {
    $remSize: $size / $body-size;
    @return #{$remSize}rem;
 }
@mixin convertFontSize($size) {
    font-size: $size; //Fallback in px for browsers who do not support
    font-size: convertRem($size);
 }

La prima e’ una fuzione che accetta un valore in px e lo converte in REM, restituendo il valore in REM, il secondo mixin invece serve per includere la formula nel css e dare un fallback in pixel per i browser che non supportano rem.

Ora posso buttare via la calcolatrice e sass si occupera’ di fare i calcoli matematici al mio posto, io devo solo aggiungere questo nel mio css :

h1 {@include convertFontSize(32px);}

e il css sara’ convertito in :

h1 {
    font-size : 32px; // fallback per vecchi browsers
    font-size : 2rem; // assumendo che il font-size base sia 16px
 }

NESTING (Nidificare).

Gioie e dolori di Sass!!  Nesting, (in italiano si traduce nidificare vero? :P). Considero la pratica del nesting una delle peggiori parti di Sass. Mi spiego subito onde evitare confusione, poter nidificare le classi (e anche le media queries) e’ una figata, ma il problema viene fuori quando si usa troppo spesso il nesting. I problemi principali sono due :

  • Debugging – E’ difficile eseguire il debug.
  • Specificita’ – se non si sta attenti si finisce per rovinare la specificita’ di un elemento e creare seri problemi al vostro file css.

Personalmente sono solito nidificare una volta sola, per il resto mi aiuto con l’indentazione del codice. Ecco un esempio di nesting con sass.

.parent-class {
    padding:10px;
      .child-class {
          padding:20px;
      }
 }

Provate a nidificare e vedete i risultati, personalmente devo sempre avere il controllo su quello che sto facendo e il nesting e’ una tecnica che mi fa perdere questo tipo di controllo, quindi preferisco non abusarne, ma molto dipende da voi e da come scrivete codice css.

@import

Questo e’ un altro, immenso vantaggio nell’usare Sass. Come sappiamo in css si possono importare file con la direttiva @import, il problema e’ che questa esegue una nuova richiesta http al server, rallentando di conseguenza il sito, invece con sass @import funziona esattamente come i moduli di nodejs, i file vengono direttamente importati nel css in fase di compilazione, quindi nessuna extra richiesta http e la possibilita’ di organizzare i css usando un metodo modulare.

I file da importare sono chiamati “partials” e iniziano con una “_” prima del nome. Esempio :

il file _typography.scss puo’ essere importato cosi in sass :

@import "path/typography"

Nota che non uso il nome de file, non e’ necessario esattamente come per i moduli di nodeJs.

Il grande vantaggio che si ha e’ il poter organizzare il proprio css in modo modulare, e importare i moduli in base alle necessita’. Spesso questi moduli vengono messi in una cartella apposita chiamata partials.
Personalmente non mi piace questo approccio, e ne uso uno diverso:

  1. partials : in questa cartella metto tutti i file sass che non verranno compilati. In genere il file che contiene le variabili e quello che contiene funzioni e mixin.
  2. Modules : Io carico tutti i file in questa cartella, mi suona molto piu’ logico visto che cerco di avere un approcio modulare. (leggiti smacss o object oriented css per maggiori info)

Ora questo metodo differenzia dall’uso comune di Sass, ma e’ la mia personale metodologia non necessariamente bisogna seguire quelle che sono considerate “best practice” icon wink Sass : ovvero scrivi css con magia.

Eredita’! @extend

Wow! Appena leggi la parola inheritance tutti saltano dalla sedia! Praticamente questo mette la parola definitiva a “pensare in css” usando un approcio OOP. icon smile Sass : ovvero scrivi css con magia.
A parte gli scherzi questa e’ senza dubbio una delle migliori caratteristiche di Sass, permettendo di “estendere” le nostri classi css, ma vediamo subito un esempio pratico :

.class {
    font-size: 16px;
    margin-top:10px;
    padding:10px;
    background:red;
    color: #fff;
 }

Ora possiamo “estendere” questa classe a un altra classe che quindi ne “ereditera’” le regole con la possibilita’ di aggiungerne altre :

.extended-class {
    @extend .class;
    margin-bottom : 20px;
 }

Figo vero?
Sass e’, a mio modo di vedere,  per i css quello che Mootools e’ per Javascript, un framework che rende il programmare piacevole usando un approcio “object oriented” e estendendo il linguaggio per sfruttare a pieno le potenzialita’ della programmazione a oggetti.

E tu, hai mai usato Sass? Cosa ne pensi?

2 pensieri su “Sass : ovvero scrivi css con magia.”

  1. Sass (o Less) non costituiscono solo una tendenza nella programmazione web.
    Sono una vera e propria estensione che arricchisce uno scarno linguaggio come CSS.

    Da un anno circa utilizzo SASS, suddividendo i file scss in base allo scopo della pagina ed ereditando funzioni e variabili dichiarate in uno o più file.

    Oltre la possibilità di dichiarare variabili e nidificare le regole css, una delle caratteristiche migliori di Sass è la creazione e l’utilizzo dei @mixin.

    Immagina che bello scrivere delle regole che risolvono problemi più comuni (effetti css cross-browser, compatibilità con IE, ecc.), conservarli in dei piccoli contenitori ed utilizzarli quando si vuole nelle proprie regole css.

    Con Sass si è aperta una nuova strada e credo che manchi poco alla definizione di un nuovo standard per i fogli di stile (css).

  2. Ciao Fabio,
    io e’ piu’ o meno un anno che ho iniziato a usarlo, dopo essere stato titubante all’inizio ma che dire, ti cambia la vita :)
    Anche io preferisco usare un approcio modulare con i miei css, sto costruendo un framework qua in azienda basato su sass e usando i moduli e @import praticamente possiamo “costruire” un css pezzo per pezzo, includendo ed escludendo in base alle necessita’.
    Mi spiace solo averlo scoperto “tardi” ;)

I commenti sono chiusi.