Aggiungiamo un Compass

Nelle ultime lezioni abbiamo scoperto quanto sia utile Sass per creare le proprie strutture e funzionalità CSS. Questo ci obbliga comunque a dover spendere del tempo nella loro realizzazione: è possibile che non ci sia qualcosa di “già pronto” che possiamo utilizzare?

Beh la risposta diretta a questa domanda è SÌ!

Per nostra fortuna ci sono stati molti sviluppatori che, come spesso accade nel mondo Open Source, hanno deciso di contribuire a questo progetto, andando a creare una interessantissima libreria di mixin, che ci darà accesso ad un gran numero di funzionalità.

La collezione di queste funzionalità prende il nome di Compass che, sul proprio sito, viene definito come un CSS Authoring Framework Open Source. All’interno di questo framework troverai moltissime funzioni, variabili e mixin, che ti permetteranno di creare un gran numero di effetti; anche grazie all’uso delle innovazioni inserite nella specifica dei CSS3.

Sappiamo infatti che ormai i browser più diffusi riconoscono le nuove regole CSS3, ma a volte è ancora necessario utilizzare i cosiddetti vendor prefix: usando Compass otterremo questi effetti con una sola riga di codice e sfruttando i valori di default che gli sviluppatori hanno creato al posto nostro!

Non sarà quindi necessario creare i mixin per le funzionalità più diffuse (come ad esempio i bordi ed i gradienti, perché molti di questi sono già implementati.

E non ti ho ancora detto che con questa libreria diventerà incredibilmente semplice creare delle immagini Sprite, avrai a disposizione un gran numero di helper function e altre interessanti soluzioni.

Come Installare Compass

Per essere utilizzato nei tuoi progetti, Compass ha bisogno di essere installato all’interno del tuo codice Sass. Farlo è abbastanza semplice e poi Prepros ci aiuta molto!

Se hai seguito le lezioni precedenti dovresti ormai avere una cartella contenente tutto il progetto SASS, che hai successivamente aggiunto a Prepros.

Usando Prepros, attraverso due semplici passaggi, potrai

• scaricare Compass;
• installarlo sul tuo computer;
• configurarlo;
• collegarlo al progetto.

Mica male, eh? 😉

Il primo passo è quello di aprire l’applicazione stessa ed entrare nel progetto nel quale vuoi usare questo plugin: seleziona il file.scss direttamente dall’interfaccia grafica ed attiva Compass dal menu contestuale che compare sulla destra:

Se il tuo occhio è cascato immediatamente alla voce Full Compass Support, al posto di notare la sezione che con tanta cura ti ho evidenziato, non temere: vedremo il significato di questa voce  nelle prossime lezioni; al momento tutto quello che ti basterà sapere è che per utilizzare Compass, il primo passo è quello di selezionare la voce Use Compass.

È bastato un click ed il nostro progetto è (quasi) pronto per poter ospitare i mixin di Compass: non so come la vedi tu, ma dal mio punto di vista è un gran risparmio di tempo!

Per poter utilizzare veramente Compass, tutto quello che ti resta da fare è richiamarlo all’interno del tuo file .scssprincipale, in questo modo:

@import "compass";

Ecco fatto! Una semplice riga di codice ti ha permesso di importare una libreria che ti permetterà di salvare delle ore di sviluppo… e non sto affatto scherzando! Mica male come ritorno d’investimento, non ti pare?

Che Cosa Abbiamo Appena Installato

Finora ti ho detto che Compass porta con sé un incredibile numero di mixin e funzioni che ti permetteranno di velocizzare incredibilmente il tuo lavoro, ma cosa hai installato veramente? Che cosa è in grado di fare Compass che SASS non fa?

Chiariamo subito il tutto dicendo che senza SASS molto probabilmente non avremmo neanche visto Compass: tutto il codice contenuto in quest’ultimo è del codice che tu stesso potresti creare ma (proprio come quando sviluppiamo con WordPress per avere a disposizione del codice PHP già pronto) è molto utile risparmiare tempo nella configurazione dei propri mixin e funzioni ed avere qualcosa disponibile immediatamente.

Ok, è un po’ che ci giro in torno, ma ancora non ti ho detto che cosa è in grado di fare Compass… Cerchiamo di rimediare subito:

• CSS3 – qualsiasi cosa vuoi realizzare con gli effetti CSS è realizzabile con una sola riga di codice (in particolare, non dovrai preoccuparti dei vendor prefix);
• Helper Function – un’incredibile raccolta di funzioni pronte all’uso, che ti permetteranno di velocizzare incredibilmente lo sviluppo: ci sono funzioni che ti aiutano a definire il percorso ai tuoi file, altre che ti permettono di creare delle fallback CSS2 su determinate proprietà della nuova versione e un po’ di funzioni matematiche, che non fanno mai male;
• Layout – Compass ci mette a disposizione la possibilità di richiamare utili mixin che si preoccuperanno al posto tuo della creazione del layout;
• Reset – le regole di reset CSS sono fondamentali per mettere tutti i browser in riga. Come sai, molti browser aggiungono degli stili personalizzati che talvolta sballano completamente il design che stiamo realizzando: grazie a questa serie di funzionalità ci vengono fornite delle soluzioni pronte all’uso per ridurre l’impatto di queste modifiche;
• Tipografia – dato che il testo rappresenta una parte fondamentale di qualsiasi pagina web, gli sviluppatori di Compass hanno deciso di dedicare un’intera sezione del progetto a mixin e funzioni riguardanti gli stili tipografici: io stesso ho scoperto qualcosa di molto interessante al suo interno e a breve te ne parlerò;
• Utility – oltre alla sezione dedicata alle Helper Functions, ne esiste un’altra che contiene moltissimo codice utile. Vedremo alcuni esempi nelle prossime lezioni, ma lasciami soltanto anticipare che grazie ad alcune di esse sarai in grado di creare i tuoi Sprite CSS utilizzando pochissime righe di codice!

Ecco qua le 6 sezioni principali di Compass: 6 sezioni che contengono un incredibile numero di mixin e funzioni pronte per essere utilizzate!

Dato il loro elevato numero, sarà un’impresa quasi impossibile conoscere tutte le funzionalità, anche perché molto dipenderà dalle tue esigenze: prova a rispondere a queste domande:

• Utilizzi molto codice CSS3 (cosa che comunque ti consiglio di fare)?
• Sei interessato a ridurre il numero di richieste HTTP del tuo sito?
• Non vuoi perdere tempo ad inserire il percorso completo ai tuoi file?

Se hai risposto “sì” almeno ad una di queste, c’è una sezione di Compass che fa per te! A seconda del codice che scriviamo, i mixin e le funzioni di Compass che dovremo utilizzare cambieranno; la cosa che non cambia è che in ogni caso abbiamo velocizzato il nostro sviluppo, togliendoci diversi grattacapi 😉

Come Leggere la Documentazione di Compass

Come ti dicevo, conoscere tutte le funzionalità di questa libreria è un compito veramente impegnativo! Per questo, al posto di iniziare un lungo e noioso elenco, ho deciso di insegnarti qualcosa di più pratico, qualcosa che ti sarà veramente utile.

Le prime volte che mi sono trovato a consultare la documentazione di Compass mi sono trovato un po’ spaesato: molti concetti che riguardano SASS vengono usati assieme e il mio cervello, ai tempi, non era ancora pronto a mischiarli tra loro.

Un esempio su tutti: i mixin presenti in Compass presentano delle variabili con valore di default, permettendoti di usare questi mixin con una sola riga di codice.

A quel punto, nella mia mente sono apparse domande come: “Ma come faccio a modificare un colore?“, “Cosa devo fare se voglio cambiare il valore di sfumatura o la distanza y dall’oggetto?“… Posso dirti semplicemente che, mano a mano che ti addentrerai nela libreria Compass, la nebbia si diraderà!

Andiamo a vedere un esempio di come utilizzare la proprietà box-shadow su un elemento HTML:

// Includo Compass 
@import "compass";

//Includo una singola ombra
#box{
    @include single-box-shadow;
}

Questo è tutto il codice necessario per applicare un’ombra all’elemento con attributo #box! Andiamo a vedere il codice CSS generato da questo esempio:

#box {
  -webkit-box-shadow: 0px 0px 5px #333333;
  -moz-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
}

I commenti in linea (definiti con //) e l’inclusione di Compass sono scomparsi, ed io sto utilizzando la generazione di codice Expanded.

La cosa ancora più curiosa si trova nella definizione della proprietà box-shadow stessa: nel codice SASS io ho semplicemente richiamato il mixin single-box-shadow, ma nel CSS trovo tutti i valori necessari alla realizzazione dell’ombra. Le distanze X e Y, il colore e addirittura la sfumatura: tutti i valori sono già stati dichiarati… ma chi li ha dichiarati?

Come ti ho anticipato, utilizzando i mixin di Compass si usano inevitabilmente un gran numero di variabili con valore di default che gli sviluppatori hanno impostato; sono talmente tante che ho preferito dividerle in due famiglie distinte:

• variabili locali – sono quelle variabili che ti permettono di personalizzare soltanto l’effetto che stai realizzando;
• variabili globali – queste variabili contengono i valori di default del tuo intero progetto. Se cambi ad esempio il colore dell’ombra, questo verrà applicato a tutte le ombre che hai creato all’interno del progetto.

Facciamo qualche esempio: sono sicuro che poi ti sarà tutto più chiaro!

Collegandoti al sito di Compass ed aprendo la pagina riguardante le box-shadow (ricorda che si trova all’interno della sezione relativa ai CSS3), troverai la definizione del mixin single-box-shadow con la sua descrizione:

Voglio che tu osservi da vicino i parametri che sono stati inseriti in questo mixin, non ti ricordano niente? Quando abbiamo parlato delle variabili all’interno di SASS, ti ho dato un consiglio condiviso dalla maggioranza degli sviluppatori: dai alle variabili dei nomi comprensibili ed inerenti al valore contenuto!

I parametri di questo mixin sono un classico esempio: si capisce benissimo che dando un valore alla variabile $color, andrò a modificare il colore della mia ombra, mentre con $inset sarò in grado di definire se quella che sto creando dovrà essere un’ombra interna oppure no.

Insomma: il nome aiuta veramente molto a definire lo scopo di queste variabili locali, ma come puoi andarle ad impostare?

Esistono tre modi differenti per definire queste variabili:

• inserire tutti i valori, rispettando l’ordine dato dalla sintassi Compass, specificata nella documentazione,
• puoi inserire alcuni valori (in ordine),
• puoi andare a sovrascrivere il valore di una o più variabili, richiamandole direttamente nel codice.

Facciamo un paio di esempi: per ognuno di essi, riportiamo il codice SASS e il corrispondente codice CSS che viene generato.

Nel primo esempio definiamo tutti i valori ai parametri del mixin single-box-shadow:

// SASS
#box{
  @include single-box-shadow( #fff, 13px, 2px, 14px, inset );
}

//CSS generato
#box {
  -webkit-box-shadow: 13px 2px 14px inset #fff;
  -moz-box-shadow: 13px 2px 14px inset #fff;
  box-shadow: 13px 2px 14px inset #fff;
}

Come vedi, tutti i valori che diamo ai parametri vengono utilizzati. Nel prossimo esempio specifico solo tre valori:

//SASS
#box{
  @include single-box-shadow( #fff, 13px, 2px );
}

//CSS
#box {
  -webkit-box-shadow: 13px 2px 5px #fff;
  -moz-box-shadow: 13px 2px 5px #fff;
  box-shadow: 13px 2px 5px #fff;
}

Stando alla pagina del manuale, i primi tre parametri riguardano il colore, l’offset orizzontale e quello verticale: effettivamente, SASS ha sostituito solo i valori inseriti da me, lasciano per tutti gli altri i valori di default.

E se volessi cambiare solo il valore dell’ultimo parametro? è presto detto:

//SCSS
#box{
  @include single-box-shadow( $inset: inset );
}

//CSS
#box {
  -webkit-box-shadow: inset 0px 0px 5px #333333;
  -moz-box-shadow: inset 0px 0px 5px #333333;
  box-shadow: inset 0px 0px 5px #333333;
}

Ho voluto modificare solo il valore del parametro inset: tutte le altre variabili hanno mantenuto il loro valore di default.

Hai appena scoperto come modificare il valore delle variabili locali, congratulazioni!

Adesso si pone un altro problema: cosa dovresti fare se volessi modificare il valore globale di una variabile? Ad esempio, cosa dovresti modificare se volessi che tutte le ombre del progetto fossero di colore rosso?

Per fortuna il processo è abbastanza semplice: tornando alla pagina di documentazione di box-shadow, troverai un sacco di variabili così dichiarate:

Come puoi intuire dagli stessi nomi, questo sono le variabili globali con valore di default. Infatti, se osservi ancor più da vicino, noterai che sono gli stessi valori che vengono assunti dalle variabili locali che vengono utilizzate in fase di dichiarazione del mixin single-box-shadow.

In poche parole, la variabile $color assumerà il valore contenuto nella variabile $default-box-shadow-color. Questo processo diventa veramente intuitivo e naturale una volta che si comprende appieno.

Una volta scoperta questa caratteristica, viene da chiedersi: “come faccio a modificare il valore di default?“

Ehi, ma è qualcosa che abbiamo già visto anche nella precedente lezione: ridefinisco il valore di default!

// Includo Compass 
@import "compass";

// ridefinisco il valore di default per il colore
$default-box-shadow-color: #F00;

//Includo una singola ombra
#box{
  @include single-box-shadow( $inset: inset );
}

Da questo momento, tutte le ombre che andrai a creare all’interno di questo progetto avranno un colore rosso. Se poi deciderai di modificare il colore per un determinato numero di ombre, tutto quello che dovrai fare sarà settare il valore del parametro $color quando andrai a richiamare il mixin single-box-shadow.

Conclusioni

Ed anche per questa volta abbiamo raggiunto la fine della lezione!

Abbiamo molte altre cose da scoprire all’interno di Compass, ma già in questa lezione hai avuto una buona introduzione: con un po’ di pratica dovresti essere già pronto a consultare la documentazione Compass, per sfruttare questa libreria nel modo in cui credi.

Nelle prossime lezioni andremo a scoprire sia i più interessanti URL Helper, che la creazione di immagini Sprite, ma non mi dimenticherò di parlarti anche della possibilità di inserire delle procedure logiche all’interno di SASS: hai capito bene! grazie a SASS potremmo fare delle domande al nostro browser e decidere che effetti realizzare a seconda dei casi (vedremo quanto questo sarà utile quando si tratterà di realizzare una griglia)!