sass
Compass CSS3 Mixins
Ricerca…
introduzione
Guida introduttiva all'uso di Buss exesion Sass. Compass è molto utile quando si ha a che fare con CSS3 dato che fornisce mixin per scrivere 1 riga per supportare ogni browser usando le funzionalità CSS3. È anche bello includere le immagini sprite.
Imposta l'ambiente
Apri la tua riga di comando
Installazione usando Ruby
gem update --system
gem install compass
Crea un progetto
compass create <myproject>
Questo inizializzerà un progetto di bussola. Aggiungerà una cartella chiamata. La cartella avrà la seguente struttura:
| Cartella di file | descrizione |
|---|---|
| sass / | Metti i file sass / scss in questa cartella |
| fogli di stile / | In questa cartella verrà memorizzato il tuo css compilato |
| config.rb | Configura bussola - ad es. Percorso cartella, compilazione sass |
Usa la bussola
compass watch
Questo compilerà i tuoi file sass ogni volta che li cambierai. Il percorso della cartella sass può essere modificato all'interno di config.rb
Usando i CSS3 con la bussola
È possibile trovare un riferimento completo che i componenti CSS3 sono supportati in questa pagina
Per utilizzare CSS3 nel tuo progetto, Compass fornisce mixin per supportare le funzionalità CSS3 in ogni browser. In cima al tuo file Sass / Scss devi specificare che vuoi usare la bussola
@import "compass/css3";
Border-radius
Includi il raggio del bordo con la bussola nel tuo file sass:
div {
@include border-radius(4px);
}
Output CSS
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Come puoi vedere puoi usare il normale nome CSS. Basta mettere @include di fronte ad esso e usare () per impostare il valore.
Esempio di Flexbox
.row {
@include display-flex;
@include flex-direction(row);
}
Output CSS
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Conclusione
Questo sono solo due esempi. Compass offre molti più mixin CSS3. È molto utile usare Compass e non devi preoccuparti di aver dimenticato di definire un componente CSS3 per un browser specificato. Se il browser supporta la funzione CSS3, la bussola lo definirà per te.