Sass – Perchè usarlo nei fogli di stile CSS

I fogli di stile, meglio detti stylesheet, CSS vengono utilizzati per fornire la presentazione delle pagine Web, vale a dire il mix di colori, forme e disposizione di elementi affinchè la pagina Web sia quella che immaginiamo nella nostra testa e nella testa del nostro Cliente.

Creare e modificare CSS è un’esperienza entusiasmante, ma i fogli di stile stanno diventando sempre più grandi, più complessi e più difficili da mantenere; è in questo contesto che ci viene in aiuto Sass che ci permette di utilizzare funzionalità che non esistono nel classico CSS quali : variabili, annidamento, eredità, mixin.

Sass – Syntactically Awesome Stylesheets

Proprio come l’acronimo ci indica ( Syntactically awesome stylesheets – fogli di stile sintatticamente imponenenti) Sass implementa funzioni semplici ma che portano importanti risultati. Hai bisogno di cambiare un colore nel tuo stylesheet e scopri che devi trovare e rimpiazzare il valore più volte? Ebbene con Sass sarebbe così:

 $coloreazienda = #5F9EA0;
a {
  color : $coloreazienda;
  }
nav {
   background-color: $coloreazienda;
}

E se, invece hai delle regole di default che applichi a diversi elementi? Per esempio:

p {
   margin-bottom: 10px;
   font-size: 14px; 
   line-height: 1.5;
}
footer {
   margin-bottom: 10px;
   font-size: 14px;
   line-height: 1.5;
}

Con CSS dovresti modificare in ogni elemento la regola con rischi di errori e con grande perdita di tempo, con Sass sarebbe così :

@mixin default-type {
     margin-bottom: 20px;
     font-size: 14px;
     line-height: 1.5;
     }
p {
   @include default-type;
}
footer {
     @include default-type;
}

Già con due esempi si può subito vedere quanto, attraverso Sass, sia più semplice, più veloce e più flessibile creare fogli di stile CSS.

Definizione e principi

Sass è un preprocessore CSS, vale a dire uno strato tra il foglio di stile che crei e quello che rendi disponibile al browser; Sass in sostanza copre le mancanze nel linguaggio CSS permettendo di scrivere codice che rispetti il principio DRY ( Don’t Repeat Yourself ).

Una definizione completa la troviamo nel sito ufficiale di Sass : Sass è un meta-linguaggio che si situa sopra al CSS e che viene utilizzato per descrivere lo stile del documento in maniera pulita e strutturata, con una maggiore capacità di quanto possa fare il solo CSS. Sass fornisce sia una sintassi più semplice ed elegante per il CSS sia implementa diverse funzionalità che sono utili per creare fogli di stile gestibili.

SCSS – Sassy CSS

Attualmente Sass è divenuta una vera e propria estensione di CSS3, pertanto qualsiasi documento valido come CSS3 è un documento valido in SCSS e quindi che puà utilizzare Sass. Inoltre convertire un documento da CSS3 a SCSS può essere fatto in pochi passaggi.

Come inziare

Per inziare ad utilizzare Sass occorre installare un compilatore che prenda i file Sass e li trasformi nell’equivalente CSS che è quindi interpretabile dal Browser. Potrebbe sembrare difficile ma come vedrete sulla guida ufficiale il tutto si traduce in pochissimi passi ed utilizzarlo non sarà complesso.

Contattaci subito per supporto e consulenza!