Alla scoperta di Sass per programmare i fogli CSS

Un linguaggio semplice e intuitivo per preparare e compilare i tuoi fogli di stile

“Fogli di stile sintatticamente perfetti”: la traduzione letterale della acronimo Sass non è modesta e la presentazione ufficiale (“CSS con i superpoteri!”) spinge ancora più a fondo la curiosità.
Si tratta di un linguaggio, o meglio un estensione del linguaggio CSS che permette di utilizzare variabili, regole annidate e strutture di controllo.

Non si tratta di una novità assoluta, tra esperti e professionisti del web design: il progetto nasce nel 2006 e la sua prima release risale al 2007.
In origine era un “semplice” pre-processore di regole CSS: per ottimizzare fogli di stile molto estesi oppure manipolare colori, spessori, dimensioni con funzioni matematiche.

Oggi, al suo terzo rilascio, si presenta, se non con “super-poteri”, con qualche “potere” speciale, insieme a direttive di controllo più semplici e immediate.

Quello che ti voglio offrire qui è una semplice dimostrazione delle sue potenzialità, oltre a qualche risorsa di documentazione on-line – senza dimenticare che il nostro centro di formazione è in grado di fornirti tutto il supporto che desideri, per ampliare la tua competenza in questo campo.

Prima di tutto per incominciare a sperimentare devi dotarti di un “compilatore”, ovvero di un’applicazione che permetta di compilare o più semplicemente convertire Sass in CSS. Tra queste ti consiglio il prodotto open-sorce Koala (ideale per PC, Mac e Linux).

Funzioni per grid-framework

Immagina di dover gestire un layout con un griglia di colonne larghe 60px e con uno spazio tra loro di 20px. Utilizzando il linguaggio CSS normale non sarebbe possible inserire la griglia senza conoscere le dimensioni dell’elemento padre (es. tre colonne: 220px).

In Sass è possibile scrivere una funzione che gestisce la larghezza dell’elemento superiore, mantenendo variabili le dimensioni e gli spazi tra le colonne:

$column-width: 60px;
$gutter-width: 20px;

@function span-columns($columns) {
@return
$columns * $column-width + ($columns -1) * $gutter-width;
}

A questo punto per determinare nel CSS, la larghezza di una griglia di tre colonne basterà scrivere:

.foo {
width: span-columns(3)
}

Come gestire media queries

Per evitare di impazzire con le misure e utilizzare blocchi troppo estesi di codice nelle regole di media-query che gestiscono il tuo sito responsive esiste una struttura di controllo, ideata apposta per gestire in modo separato le dimensioni dei dispositivi rispetto alle regole CSS.
Ecco un esempio che utilizza il @mixin respond-to e la struttura di controllo @if:

@mixin respond-to($device) {
@if ($device == 'tablet') {
@media (max-width: 768px) {
@content;
}
}

@else if ($device == 'phone') @media (max-width: 320px) {
@content;
}
}
}

Ecco come sarà possibile cambiare il colore di sfondo dello stesso elemento su un dispositivo mobile:

.foo {
background: red;

@include respond-to('phone') {
background: blue;
}
}