Qualche giorno fa ho partecipato alla conferenza JSDay/PHPDay, tenutasi a Verona, alla quale ho ricevuto una grandissima quantità di stimoli e informazioni. Tra i  numerosi interventi, alcuni hanno avuto risvolti filosofici o sono stati di grande aiuto nella gestione dei progetti e delle tecnologie, ma si sa, spesso sono i piccoli accorgimenti o le tecnologie apparentemente più “semplici” che possono cambiare in modo drastico il proprio modo di lavorare: quelle che ti fanno esclamare “perché non ci ho pensato prima??”.

Una di queste è la combinata SASS e Compass. Si tratta di una tecnologia in grado di rivoluzionare in modo permanente il proprio modo di lavorare con il CSS, senza tuttavia richiedere troppi sforzi o essere astrusa: il tipico esempio di sistema sufficientemente maturo da non intralciare chi lavora, e facilitare in modo discreto le operazioni più tediose e macchinose.

Cosa fanno SASS e Compass?

SASS è un linguaggio che espande la notazione CSS, aggiungendo blocchi, variabili, e numerosi altri costrutti. Compass lo arricchisce ulteriormente, aggiungendo ulteriori strumenti e librerie di grande utilità. Compass inoltre impacchetta il tutto, includendo un pre-processore di SCSS che trasforma i file scritti con queste tecnologie in CSS standard, digeribili da qualunque browser.

Perché usarli?

L’uso di questi strumenti rende il codice più pulito e comprensibile, e incentiva l’implementazione secondo i principi DRY. Infatti:

• è possibile dividere i file in CSS parziali, separando e aggregando per sezioni logiche. I file vengono poi compilati in un unico file CSS (minificato, se si vuole)

• è possibile usare “mixin”, cioè macro, che vengono espanse quando vengono incluse. Questo permette di incapsulare ulteriormente il codice

• è possibile usare variabili e fare operazioni basilari matematiche. Ad esempio, se creiamo una palette di colori e li inseriamo in variabili, sarà possibile cambiare un colore in un solo punto, piuttosto che andare a cercarlo in tutti i file, con il rischio di cambiare inavvertitamente altre parti indesiderate

Andare oltre

Compass non è solamente un pacchetto di SASS però: a disposizione dello sviluppatore ci sono una grande quantità di funzioni già definite e di plugin esterni, che permettono di raggiungere in pochissime righe di codice risultati fantastici. Eccone alcuni, indispensabili:

• Susy: questo componente permette di creare la griglia tipografica del sito in un istante, ed ancorarvi tutti gli elementi della pagina. La griglia può essere fluida o statica, e renderla responsive è un gioco. Gli strumenti di debug permettono di visualizzare la griglia come sfondo della pagina, rendendo evidenti problemi e soluzioni. Un toccasana!

• Vertical rhythm: le funzioni relative sono parte integrante di Compass, e permettono di automatizzare i calcoli matematici che legano le grandezze dei font in pixel, la loro dimensione relativa (che deve essere l’unica presente nel CSS finale!), e la dimensione ideale dell’interlinea (che serve per raggiungere un risultato armonico e coerente con i principi della tipografia). A prima vista sembra astruso. In realtà non lo è: font grande, interlinea grande, font piccolo interlinea piccola, questo è il principio. E la differenza si vede.

• Sprite. Nel vostro sito avete un file png per ogni icona, logo, o elemento grafico del sito? Se sì, state appesantendo la navigazione e frustrando il visitatore. Le icone e gli elementi grafici vanno accorpati in un unico file e usati tramite maschere.
  Più semplice dirlo che farlo. Ma Compass automatizza interamente la procedura! Dategli una cartella con dei png, e genererà per voi un unico file sprite, e vi darà delle scorciatoie per usarli!

• CSS3. Stanchi dei prefissi -moz, -webkit, ecc…? Usate il mixin di Compass. Una sola riga viene espansa in ognuno dei prefissi necessari, dando la massima compatibilità. E una volta che non saranno più necessari, ci penserà Compass da solo a pulire il vostro file.

Buon divertimento!

Con questi strumenti nella vostra scatola degli attrezzi ridurrete notevolmente i tempi di sviluppo del CSS, specie relativamente a griglie e versioni responsive; avrete siti più compatibili e standard; e vi divertirete di più.