Share
Sass potrebbe potenzialmente chiamarsi CSS 2.0; ha alcune caratteristiche davvero eleganti che ti permettono di scrivere il tuo codice in meno tempo e con maggiore flessibilità. Nell'articolo di oggi, lavoreremo le basi!
Sass è semplicemente un modo diverso di lavorare con i CSS. Ti permette di mantenere il tuo codice CSS molto semplice e aiuta ad aumentare la leggibilità. Ci vuole qualcosa del genere:
E lo trasforma in:
Puoi dare un'occhiata a Sass su http://sass-lang.com/
Compass rende ancora più facile lavorare con Sass. L'autore, Chris Eppstein, ha anche incluso alcuni framework convertiti come Blueprint, YUI e 960.gs. Si integra facilmente anche con i progetti basati su Ruby, ma è altrettanto facile da aggiungere a qualsiasi altro progetto. La bussola è open source ed è estremamente ben documentata. Controlla la fonte e la documentazione.
Sia Sass (che fa parte del Progetto Haml) sia Compass sono installati tramite RubyGems. Se non hai idea di cosa sto parlando, dai un'occhiata al "Passaggio 1 - Installazione di Ruby on Rails" del mio precedente articolo Ruby on Rails for Designers e segui i passaggi fino a quando non premi la sezione "Installazione di Rails".
Per installare entrambe queste gemme, possiamo semplicemente eseguire un singolo comando:
(sudo) gem install haml chriseppstein-compass
Finché dice che ha installato entrambe le gemme, sei a posto!
Se stai lavorando con un progetto basato su Ruby, controlla la documentazione in quanto spiegherà come farlo funzionare con il tuo specifico framework, ma supporrò che stiamo lavorando con un semplice HTML o un progetto simile.
Il comando bussola ha un sacco di opzioni, e se usi compass -help, potresti vedere:
A proposito: il prossimo alla riga in alto che dice "Loading haml-edge gem". è perché uso l'ultima versione, quindi non devi preoccuparti se il tuo dice qualcosa di diverso.
Ora inizieremo il nostro progetto Compass. Per creare esegui il seguente comando (incluso il punto finale, che indica alla bussola dove vogliamo realizzare il nostro progetto!)
compass --sass-dir = sass .
E dovresti vedere:
In fase di inizializzazione, Compass avrebbe normalmente come impostazione predefinita avere il Sass in un nome di cartella src, ma volevo cambiarlo così ho aggiunto l'opzione. Se guardi la cartella, dovresti vedere un file chiamato config.rb e altre due cartelle.
Il file config.rb è la configurazione a cui guarda Compass, ma la maggior parte delle volte non è necessario fare confusione con questo. Inoltre, come dice l'output del comando di creazione, abbiamo tre modi per aggiornare il nostro CSS dal nostro Sass:
Accentsconagua
bussola - usando questa opzione, dovresti essere nella directory corretta, e poi Compass compilerebbe il tuo Sass una volta.bussola -u percorso / a / progetto - questo è quasi lo stesso del comando come sopra, ma non devi essere nella directory del progetto, e piuttosto passarci il comando.bussola - orologio [percorso / al / progetto] - questo comando è davvero fantastico in quanto controlla eventuali modifiche ai file Sass e li ricompilerà automaticamente ogni volta che viene rilevata una modifica.Ora che sai come configurare un progetto, spiegherò alcune delle "regole" di lavoro con Sass
Normalmente quando si scrive CSS, si scriverebbe qualcosa come:
#header width: 900px; background: # 111; #header a color: # 000; text-decoration: none;
Uno dei problemi è che ripetete lo stesso nome molte volte. Facciamo di questo in Sass. Ho intenzione di lavorare nel file screen.sass, quindi elimina tutto e il tuo Sass vorrebbe:
#header: larghezza 900px: sfondo # 111 a: colore # 000: nessuna decorazione del testo
Personalmente, è molto più facile leggere e scrivere in questo modo, senza parentesi graffe o punti e virgola. Il modo in cui Sass capisce il nidificazione è attraverso l'indentazione.
Il primo selettore non è indentato, quindi il CSS finale inizia con quello. Inoltre, tutte le proprietà (quindi colore, altezza, ecc.) Iniziano con i due punti. Quindi per le proprietà di #header sono rientrate. Non importa se usi tabulazioni o spazi, ma devi rimanere coerente, altrimenti vedrai un errore (che mostrerò in un minuto).
Quindi ora che hai le tue proprietà, abbiamo il nostro prossimo selettore. Poiché questo è rientrato allo stesso modo delle proprietà, l'output CSS sarà #header a ...
Ora che siamo così lontani, proviamo a compilare: (nella directory del progetto)
bussola
E voilà!
Diciamo che non hai indentato tutto allo stesso modo, Compass avrebbe sbagliato:
Ora, una volta conosciuto il CSS, Sass non sarà molto una curva di apprendimento, poiché la differenza principale quando si inizia sono le diverse regole di formattazione. Successivamente, lavoreremo con alcune delle parti più avanzate (ma più interessanti!) Di Sass.
Una caratteristica fantastica di Sass è la sua capacità di usare variabili. Un esempio:
!link_color = #fff #header: larghezza 900px: background # 111 a: color =! link_color: text-decoration none
Compilando questo, ti darebbe:
Potresti ridere di questo titolo, ma è vero, puoi fare matematica in Sass! Per questa dimostrazione, useremo la modalità interattiva di Sass, quindi esegui:
sass -i
E un po 'di confusione ti avrebbe dato:
O un approccio più visivo:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Oltre all'addizione e alla sottrazione, puoi anche moltiplicare e dividere:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Per uscire dalla modalità interattiva Sass, premere Control-C, quindi digitare "end" e premere invio.
Se hai mai sentito di mantenere il tuo codice DRY, DRY significa "non ripeterti". I mixin ti permettono di fare proprio questo. Ad esempio, con la crescente popolarità degli angoli arrotondati, potresti voler creare un mixin per gestirli, quindi da qualche parte, (non sotto un selettore) dovresti aggiungere:
= arrotondato: border-radius 4px: -moz-border-radius 4px: -webkit-border-radius 4px
E per usare, dovresti fare qualcosa come:
#header: larghezza 900px: sfondo # 111 + arrotondato
E quando compilato:
Diciamo però, si può desiderare che il raggio del bordo sia variabile - beh, si può fare in modo che un mixin si aspetti di ricevere alcuni valori. Cambiando il nostro mix, sembrerebbe:
= arrotondato (! raggio = 4px): raggio-bordo =! raggio: -moz-border-radius =! raggio: -webkit-border-radius =! radius
E poi per usare potresti usare quello che abbiamo fatto prima, e quindi il valore sarebbe di default a 4px, altrimenti:
#header: larghezza 900px: sfondo # 111 + arrotondato (8px)
Sass ha anche la possibilità di importare altri file Sass, quindi diciamo che volevi importare un file (nello stesso modo di questo file sass), dovresti aggiungere:
@import reset.sass
Questa funzione è davvero interessante nel darti la possibilità di mantenere gli stili estranei al di fuori del tuo file principale. Ad esempio, potresti anche conservare un file di mixin sass che hai copiato nei progetti e quindi una semplice importazione lo aggiungerebbe a questo codice - nessuna copia e incolla.
Spero tu capisca le basi dell'uso di Sass e Compass e probabilmente lo userai nel tuo prossimo progetto! Ora, se sei come quando ho trovato Sass, e hai detto "Non ho bisogno di questo!", Provalo. Ci sono passato per tutti i miei progetti recenti e mi piace davvero lavorare con esso.
Ecco alcuni link che possono aiutarti lungo il percorso:
