Scrivere un foglio CSS di per sé può essere divertente, ma i siti si fanno sempre più grandi e complessi e di conseguenza i fogli di stile sempre più difficili da mantenere. Si ci comincia a chiedersi se c’è un modo per non ripetere un sacco di codice CSS nel foglio di stile. La buona notizia è che la soluzione esiste e si chiama pre-processore. Utilizzare metodi di pre-elaborazione fa risparmiare un sacco di tempo e fatica, perchè:
- Consente di utilizzare variabili che possono essere riutilizzate nel foglio di stile
- Linguaggio e sintassi di alto livello che offre numerose funzionalità avanzate
- I file CSS vengono compilati e caricati sul server Web di produzione
Ci sono due metodi di pre-elaborazione: SASS e LESS. In questo articolo vedremo tuttavia il metodo SASS, Syntactically Awesome Style Sheets.
SASS
Sass consente di utilizzare funzioni che ancora non esistono in CSS come le variabili, la nidificazione, il mixin, l’eredità e altri gadget nifty che rendono la scrittura del codice CSS veramente divertente. Dopo aver scritto il file .sass, quest’ultimo viene pre-elaborato attraverso degli appositi tool a riga di comando o tools inclusi in web framework e successivamente tradotto in un semplice file CSS ben formattato che è possibile utilizzare nel sito web finale. Di seguito le caratteristiche più interessanti.
Uso di variabili
SASS supporta le estensioni .sass e .scss. Definito un blocco CSS standard, vediamo come si può trasformare in SASS utilizzando il formato .sass e .scss:
header {
margin: 0;
padding: 0;
color: #fff;
}
Per trasformare questo CSS in SASS, supponiamo di voler utilizzare una variabile $color a cui assegnamo il colore esadecimale bianco #fff. A questo punto possiamo richiamare il colore direttamente utilizzando la variabile anziche il codice esadecimale. La differenza tra .sass e .scss (versione più recente) è fondamentalmente l’uso o meno delle parentesi { } e il punto e virgola.
Formato SASS
$color: #fff header margin: 0 padding: 0 color: $color
Formato SCSS
$color: #fff;
header {
margin: 0;
padding:0;
color: $color;
}
In entrambi i casi, quando il file SASS viene elaborato, la variabile definita $color viene processata e il suo valore viene inserito nel CSS. Questo metodo può essere estremamente potente quando si lavora con dei colori che devono essere mantenuti coerenti in tutto il sito.
Annidamento del codice
Quando si scrive codice HTML probabilmente avete notato il codice nidificato. CSS, invece, non supporta l’annidamento. Con SASS invece è possibile annidare i selettore CSS cosi come avviene per l’HTML, ma bisogna essere consapevoli del fatto che regole troppo nidificate si traducono in CSS più qualificati che potrebbe rivelarsi difficili da mantenere. Generalmente l’annidamento a più livelli è considerato una cattiva pratica.
Esempio
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
I selettori UL, LI e A sono stati annidati all’interno del selettore NAV. Questo è un buon modo per organizzare il CSS e renderlo sicuramente più leggibile. Quando verrà generato il file CSS, il pre-processore produrrà qualcosa di questo tipo:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Importazione
In CSS è possibile utilizzare l’importazione attraverso il comando import, che permette di dividere il CSS in piccole porzioni sicuramente più gestibili. L’unico inconveniente è che ogni volta che si utilizza l’import in CSS si crea una nuova richiesta HTTP. SASS si basa sullo stesso concetto ma invece di effettuare una richiesta HTTP, prende il file che si desidera importare e lo combina con il file che si sta importando in modo da creare un singolo file CSS.
Supponiamo di avere due file _reset.scss e base.scss. Vogliamo importare reset in base.
/* _reset.scss */
html, body, ul, ol {
margin: 0;
padding: 0;
}
/* base.scss */
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Notare che usando la clausula @import ‘reset’ non è necessario includere anche l’estensione .scss. Ci penserà il pre-processore SASS ad aggiungere l’estensione e cercare il file. Il CSS che verrà generato sarà quindi:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Mixin
Alcune dichiarazioni in CSS sono un po’ noiose da scrivere, a causa dei vendor prefixes che esistono nel CSS3. Un mixin consente di effettuare gruppi di dichiarazioni CSS che si desidera riutilizzare in tutto il sito. È anche possibile passare i valori per rendere il mixin ancora più flessibile. Un buon uso di un mixin è appunto per i vendor prefixes. Ecco un esempio per il border-radius.
@mixin border-radius ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius (10px); }
Per creare un mixin si usala direttiva mixin seguita da un nome e le parentesi tonde (all’interno delle quali è possibile specificare una variabile). Quando verrà generato il CSS, l’output sarà simile a questo:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Ereditarietà
Questa è una delle caratteristiche più utili di SASS. Utilizzando la parola chiave extend possiamo condividere un insieme di proprietà CSS da un selettore a un altro. E’ un modo questo per mantenere il file SASS più snello. Nell’esempio che segue, vengono definite le classi per un sistema di messagistica con errori, avvisi e notifiche.
.message {
border: 1px solid #ccc ;
padding: 10px ;
color: #333 ;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
Il codice di cui sopra non fa altro che eseguire direttamente le proprietà CSS in .message e poi applicarle alle classi .success, .error, e .warning. Il CSS generato sarà questo:
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Operatori
Un file CSS non può contenere operatori matematici. In SASS invece esistono diversi operatori matematici standard come + , – , * , / e % . Nel nostro esempio abbiamo intenzione di calcolare semplicemente la larghezza dell’articolo e del lato destro.
.container { width: 100%; }
article [ role = "main" ] {
float: left;
width: 600px / 960px * 100%;
}
aside [ role = "complimentary" ] {
float: right;
width: 300px / 960px * 100%;
}
Abbiamo creato una griglia fluida molto semplice, di base 960 px. Le operazioni in SASS ci permettono di effettuare dei calcoli per convertire, ad esempio, i pixel in percentuali, in modo molto semplice e immediato. Il CSS generato sarà simile a questo:
.container {
width: 100 %;
}
article [ role="main" ] {
float: left;
width: 62.5 %;
}
aside [ role="complimentary" ] {
float: right;
width: 31.25 %;
}
Cosa bisogna installare?
Esistono diverse applicazioni per Mac, Windows e Linux che permettono in pochi minuti di testare i file SASS. È possibile scaricare la maggior parte delle applicazioni gratuitamente, anche se alcuni di essi sono a pagamento. Prima di utilizzare Sass è comunque necessario installare Ruby. Il modo più veloce per ottenere il Ruby sul computer Windows è quello di utilizzare Ruby Installer. Il programma di installazione installerà anche una riga di comando che vi permetterà di utilizzare le librerie Ruby.
Per maggiori informazioni e approfondimenti
http://sass-lang.com
