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.

Cos'è la bussola?

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, Compass supporta variabili, mixin e nesting;
  • fornisce un'intera gamma di funzioni di supporto per immagini, colori, tipografia e altro;
  • supporta i calcoli matematici;
  • aiuta a garantire la compatibilità cross-browser.

Come Sass e LESS, Compass è solo uno strumento per semplificare la progettazione di siti Web.

Come installare Compass

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.

Iniziare con Compass

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.

Conclusione

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.