Stili di stile sintatticamente fantastici usando la bussola in Sass

Nel nostro ultimo post, abbiamo menzionato una volta su Compass. Secondo il sito ufficiale, è descritto come un framework di authoring CSS open-source.

In breve, Compass è un'estensione Sass e, come LESS Element of LESS, ha un sacco di Mixin CSS3 pronti all'uso, tranne che ha aggiunto anche molte altre cose che lo rendono uno strumento più potente di Sass. Controlliamolo.

Installazione di Compass

Bussola, come Sass, deve essere installato nel nostro sistema. Ma, se stai usando un'applicazione come Scout App o Compass.app, questo non sarà necessario.

Senza di loro, devi farlo “manualmente” attraverso Terminale / prompt dei comandi. Per fare ciò, digitare la seguente riga di comando;

Sul terminale Mac / Linux

 sudo gem installare bussola 

Sul prompt dei comandi di Windows

 gemma installare bussola 

Se l'installazione ha esito positivo, dovresti ricevere una notifica come mostrato di seguito;

Quindi, esegui la seguente riga di comando nella tua directory di lavoro per aggiungerla Compassare i file di progetto.

 bussola init 

Ulteriori letture: Compass Documentazione della riga di comando

Configurazione della bussola

Se hai eseguito questo comando bussola init, ora dovresti avere un file chiamato config.rb nella tua directory di lavoro. Questo file viene utilizzato per configurare l'output del progetto. Ad esempio, possiamo cambiare i nostri nomi di directory preferiti.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Elimina la riga di commento generata da Compass; prepariamo vero se abbiamo bisogno che i commenti siano stampati o falso se non è necessario.

 line_comments = false 

Possiamo anche decidere l'output CSS. Ci sono quattro opzioni che possiamo selezionare :allargato, :compatto, : compressae :nidificato. Per ora, abbiamo solo bisogno di essere ampliato poiché siamo ancora in fase di sviluppo.

 output_style =: expanded 

Penso che queste configurazioni siano sufficienti per la maggior parte dei progetti in generale, ma puoi sempre fare riferimento a questa documentazione, Compass Configuration Reference se hai bisogno di più preferenze.

Infine, dobbiamo orologio ogni file nella directory con questa riga di comando;

 orologio da bussola 

Questa riga di comando, come in Sass, guarderà ogni cambiamento di file e creerà o aggiornerà i corrispondenti file CSS. Ma ricorda, esegui questa linea dopo aver completato la configurazione del progetto config.rb, altrimenti ignorerà semplicemente le modifiche nel file.

CSS3 Mixins

Prima di camminare attraverso CSS3, nel nostro primario .SCSS file, dobbiamo importare il Compass con la seguente riga @import "bussola";, questo importerà tutte le estensioni in Compass. Ma, se solo abbiamo bisogno di CSS3, possiamo farlo in modo più specifico con questa linea @import "bussola / css3".

Ulteriori letture: Compass CSS3.

Ora, iniziamo a creare qualcosa con Saas e Compass. Nel documento HTML, supponendo che ne sia stato creato uno, inseriremo il seguente semplice markup:

L'idea è anche semplice; creeremo una scatola ruotata con angoli arrotondati, e di seguito i nostri stili nidificati Sass per l'antipasto;

 body background-color: # f3f3f3;  section width: 500px; margine: 50px auto 0; div width: 250px; altezza: 250 px; background-color: #ccc; margine: 0 auto;  

E, per ottenere gli angoli arrotondati del nostro rettangolo, possiamo includere i Mixin Compass CSS3 come segue;

 body background-color: # f3f3f3;  section width: 500px; margine: 50px auto 0; div width: 250px; altezza: 250 px; background-color: #ccc; margine: 0 auto; @include border-radius;  

Questo border-radius Mixins genererà tutti i prefissi del browser e, per impostazione predefinita, il raggio dell'angolo sarà 5px. Ma possiamo anche specificare il raggio del nostro bisogno in questo modo @include border-radius (10px); .

 sezione div larghezza: 250px; altezza: 250 px; background-color: #ccc; margine: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;  

Successivamente, come il piano, ruotermo anche la scatola. È davvero facile farlo con Compass, tutto ciò che dobbiamo fare è chiamare il metodo di trasformazione, in questo modo;

 body background-color: # f3f3f3;  section width: 500px; margine: 50px auto 0; div width: 250px; altezza: 250 px; background-color: #ccc; margine: 0 auto; @include border-radius (10px); @include ruota;  

Questo Mixin genererà anche quei noiosi prefissi dei fornitori e la rotazione richiederà 45 gradi per impostazione predefinita. Vedi il CSS generato di seguito.

 sezione div larghezza: 250px; altezza: 250 px; background-color: #ccc; margine: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform: ruota (45 gradi); -moz-transform: ruotare (45 gradi); -ms-transform: ruota (45 gradi); -o-trasforma: ruota (45 gradi); transform: ruotare (45 gradi);  

Compass Helpers

Una delle funzionalità più potenti di Compass sono gli Helpers. Secondo il sito ufficiale, Gli helper della bussola sono funzioni che aumentano le funzioni fornite da Sass. Bene, diamo un'occhiata ai seguenti esempi per ottenere un'immagine chiara.

Aggiunta di file @ Font-face

In questo esempio, aggiungeremo famiglia di caratteri personalizzati con @ Font-face regola. In un semplice CSS3, il codice può apparire più o meno come sotto, composto da quattro tipi di font diversi ed è anche difficile da ricordare per alcune persone.

 @ font-face font-family: "MyFont"; formato src: url ('/ fonts / font.ttf') ('truetype'), formato url ('/ fonts / font.otf') ('opentype'), url ('/ fonts / font.woff') ('woff'), formato url ('/ fonts / font.eot') ('embedded-opentype');  

Con bussola possiamo fare lo stesso più facilmente con dei font-files () Helpers;

 @include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Il codice sopra genererà un risultato che è esattamente uguale al primo snippet di codice, inoltre rileverà automaticamente il tipo di carattere e lo aggiungerà al formato() sintassi.

Tuttavia, se osserviamo attentamente il codice, vedremo che non abbiamo aggiunto il percorso del font (/ fonts /). Quindi, come ha fatto Bussola a sapere dove si trovano i caratteri? Bene, non confondersi, questo percorso è in realtà derivato da config.rb con fonts_path proprietà;

 fonts_dir = "caratteri" 

Quindi, diciamo che lo cambiamo fonts_dir = "myfonts", allora il codice generato sarà url ( '/ MyFonts / font.ttf'). Per impostazione predefinita, quando non si specifica il percorso, Compass lo dirige a fogli di stile / fonts.

Aggiunta di immagini

Creiamo un altro esempio, questa volta aggiungeremo un'immagine. L'aggiunta di immagini tramite CSS è una cosa comune. Generalmente lo facciamo usando il immagine di sfondo proprietà, così;

 div background-image: url ('/ img / the-image.png');  

In Compass, piuttosto che usare il url () funzione, possiamo sostituirlo con URL dell'immagine() Aiutanti e simili all'aggiunta @ Font-face sopra, possiamo ignorare completamente il percorso e lasciare che Compass gestisca il resto.

Questo codice genererà anche la stessa dichiarazione CSS come nel primo frammento.

 div background-image: image-url (the-image.png);  

Inoltre, Compass ha anche Image Dimension Helpers, rileva principalmente la larghezza e l'altezza dell'immagine, quindi nel caso in cui avessimo bisogno che fossero entrambi specificati nel nostro CSS, possiamo aggiungere altre due righe, come segue;

 div background-image: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png");  

L'output diventerà qualcosa come questo;

 div background-image: url ('/ img / images.png? 1344774650'); larghezza: 80 px; altezza: 80 px;  

Ulteriori letture: Funzioni di aiuto bussola

Pensiero finale

Bene, abbiamo discusso parecchio su Compass oggi e come puoi vedere è uno strumento davvero potente e lascia che scriviamo CSS in un modo più elegante.

E, come già sapevi, Sass non è l'unico Preprocessore CSS; c'è anche MENO di cui abbiamo discusso a fondo prima. Nel prossimo post, proveremo a confrontare, testa a testa, quale di questi due fa meglio il lavoro nella preelaborazione CSS.

• Scarica fonte