Molti progettisti usano una sorta di pre-processore CSS, che sia insolenza , DI MENO o Stilo . Se hai usato uno di questi, probabilmente sei anche consapevole del fatto che Compass è un framework costruito su Sass, e anche se la sua installazione potrebbe essere scoraggiante, una volta che lo utilizzerai scoprirai velocemente che è una delle migliori abilità il web designer può imparare.
Se non hai mai usato Sass in precedenza, ti consiglio di dare un'occhiata a WDD introduzione a Sass.
Compass funziona come un framework per il tuo CSS. Quando lavori su un grande progetto è facile che le cose sfuggano di mano e spesso trovare le cose nel tuo CSS è una sfida. Compass tenta di risolvere questi problemi, con l'ulteriore vantaggio di lavorare con i prefissi dei fornitori.
Come ho detto sopra, Compass è un framework per il tuo CSS che risolve alcuni dei problemi con la lingua. Include anche alcuni strumenti per rendere lo sviluppo più rapido e semplice:
Come Sass e LESS, Compass è solo uno strumento per semplificare la progettazione di siti Web.
Compass è una gemma di Ruby, quindi per installarlo devi prima avere Ruby installato sul tuo computer. Fortunatamente l'installazione di Ruby è semplice, su Windows è sufficiente scaricarlo Ruby Installer per Windows , su Mac / Linux segui le istruzioni su Sito rubino
Una volta installato Ruby, installare la bussola è facile come questo:
gem install compass
Questo installerà sia Compass che Sass.
Se vuoi creare un progetto Compass, digita:
compass create /path/to/projectcd /path/to/projectcompass watch
Queste tre righe di codice significano che ogni volta che cambi un file Sass verranno automaticamente compilati in CSS.
In alternativa, è possibile utilizzare Codekit (Mac) o Prepros (Windows) per compilare il Sass quando viene salvato.
Compass è diviso in moduli e per iniziare a utilizzare le sue utilità dobbiamo prima importare il modulo che vogliamo nel nostro file .scss principale. Ad esempio, per importare il modulo CSS3 useremo:
@import "compass/css3";
Ora possiamo iniziare a utilizzare le utilità e i mixin offerti da Compass per le nuove proprietà fornite con CSS3. La cosa migliore di questo è che non dobbiamo digitare più e più volte i prefissi dei fornitori, il che è sempre stato un problema quando si trattava di CSS3.
Ecco un esempio, se volessimo creare un semplice layout a 3 colonne con una grondaia 20px, in CSS dovremmo digitare:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}
Puoi vedere quanto è ingestibile che rende rapidamente il nostro codice. Con l'aiuto di Compass e Sass tutto ciò di cui abbiamo bisogno è questo:
div{@include column-count(3);@include column-gap(20px);}
Come puoi vedere, abbiamo rimosso i prefissi dei fornitori e ciò che è costato 6 righe di CSS in appena 2.
Un altro esempio di CSS che richiede molto digitazione, è gradienti. Ecco come scriveremo un semplice gradiente dal bianco al nero nei CSS:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}
Creare lo stesso effetto con Compass è semplice come:
.gradient{@include background-image(linear-gradient(#fff, #000));}
Non solo questo riduce significativamente la quantità di codice, ma se vuoi cambiare i colori, nella versione Bussola devi cambiarli solo una volta.
C'è una lista completa dei proprietà CSS3 abbreviate qui.
Compass include anche alcuni helper per i collegamenti, uno dei quali è un vero risparmio di tempo. Innanzitutto, dobbiamo includere il modello tipografico come inizio del nostro file Sass principale:
@import "compass/typography"
Il modulo di tipografia ha una grande stenografia per lo styling dei colori, in questo modo:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}
Questa è la cosa migliore di Compass; prende il codice che usiamo quotidianamente e ci dà le versioni stenografiche.
Questo articolo è stato solo una breve introduzione a Compass, ma se hai trovato l'argomento eccitante come me, ti consiglio vivamente di Consulta il loro sito web ed esplorare più delle utilità che sono disponibili.
Spero che ora considererai l'utilizzo di Compass e Sass nei tuoi progetti, perché sono davvero un'aggiunta incredibile agli strumenti del web designer.
Usi Compass o Sass? Preferisci un pre-processore diverso? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine della bussola via Shutterstock.