Share
Sass è progettato per aiutare a scrivere CSS più velocemente; i mix sono le caratteristiche che lo rendono possibile. Esistono diverse librerie di pesi massimi con formule complesse per ogni situazione, ma oggi mostrerò come creare mixaggi che completino i flussi di lavoro esistenti.
Miniatura: mano mescolare uovo su PhotoDune.
Nota: I file di documento completati possono essere scaricati in anticipo per vedere cosa creeremo e avere un'idea di come appaiono i file Sass grezzi.
Sto usando Sass nel mio sviluppo front-end per più di un anno, e le mixin sono state la caratteristica su cui mi sono attaccato subito. Ho visto una riduzione immediata del tempo impiegato per scrivere i fogli di stile, non importa quanto grande o piccolo sia il progetto. Ma quali sono i mixin? Dal sito Web di Sass:
I mix sono una delle caratteristiche di Sass più potenti. Consentono il riutilizzo di stili, proprietà o anche selettori, senza doverli copiare e incollare o spostarli in una classe non semantica.
In altre parole, i mixin sono generatori di codice. Crei un mixin nel tuo foglio di stile Sass con @mixin direttiva, definire le regole CSS che dovrebbe produrre e chiamarla ogni volta che è necessario quelle regole incluse in una dichiarazione di stile. Uso i mixin esclusivamente per le funzionalità CSS3 come box-shadows, text-shadows e border-radius. Molte di queste funzionalità non sono completamente supportate e richiedono un prefisso del fornitore come -webkit-, -moz-, -ms-, -o- lavorare come previsto Invece di scrivere cinque regole ogni volta che voglio usare una funzione CSS3, posso chiamare un mixin di una riga e farlo generare CSS corretto per me.
Questi primi due passaggi ci impongono di aprire l'app Terminal (Prompt dei comandi in Windows) per verificare il linguaggio Ruby e installare la gemma Sass. Cerca il terminale nei seguenti luoghi:
Una volta aperto il terminale, digitare il comando seguente per verificare l'installazione di Ruby. Non digitare il simbolo del dollaro: è il tuo segnaposto.
$ che rubino
Dovresti vedere alcune informazioni sul percorso come / Usr / local / bin o un messaggio di errore se Ruby non è installato. Ecco l'output dal mio terminale OS X:
Se ricevi un errore, o se capisci che Ruby non è installato sulla tua macchina, qui ci sono alcune risorse per iniziare e funzionare con il minimo sforzo. Il processo di installazione di Ruby va oltre lo scopo di questo articolo ed è ben documentato sui siti sottostanti.
Una volta verificato o installato il linguaggio Ruby, Sass è un gioco da ragazzi. Dal Terminale, inserisci questo comando: $ gem install sass. Se il tuo utente non ha le autorizzazioni corrette, potrebbe essere necessario eseguire il comando con sudo (Super User Do) come questo: $ sudo gem install sass. In pochi secondi, dovresti vedere un output simile alla schermata qui sotto.
Mentre non lo fai bisogno un'app di compilatore come LiveReload, Compass o CodeKit per compilare Sass in CSS vanilla, rende il primo viaggio intorno al blocco molto più agevole. CodeKit è solo OS X, LiveReload è principalmente per OS X, con una beta di Windows; L'app Bussola funziona su OS X, Windows e Linux. Le licenze variano da $ 10 USD a $ 25 USD al momento della scrittura, ma ne vale la pena per il tempo risparmiato man mano che si approfondisce lo sviluppo di Sass.
Ora sarebbe un buon momento per dire che Sass è disponibile in due versioni, .insolenza e .SCSS. Senza entrare nello specifico, mi attengo alla sintassi .scss perché assomiglia molto a CSS di vaniglia e compila senza alcun intoppo.
Dopo aver impostato il compilatore, ti consigliamo di impostare una directory di lavoro con i tuoi file HTML e CSS. Per questo tutorial, ho creato un esempio chiamato Write Your Own Sass Mixins. Di seguito è riportata la struttura a cui farò riferimento durante il tutorial. Se non hai ancora scaricato i file del documento, per favore fallo e aggiungi i file Museo Sans e Droid Serif alla tua directory / fonts. Questi font sono necessari per alcuni mixin che creeremo in seguito nel tutorial.
Scrivi il tuo Sass Mixins index.html / css (directory) / fonts (directory) / scss (directory) | - main.scss
Dal momento che ho optato per LiveReload, gli diremo di tenere traccia delle modifiche che dovrebbero essere compilate in CSS. Quando accendi LiveReload, dovresti essere accolto con la schermata mostrata sotto. Trascina la directory di lavoro nella barra laterale delle Cartelle monitorate nella finestra di LiveReload.
Quindi dovrai controllare il Compilare SASS, LESS, Stylus, CoffeeScript e altri scatola. Clic Opzioni per selezionare il percorso di uscita successivo.
Dovresti vedere una tabella vuota con i percorsi di output evidenziati e scss / main.scss spuntati nella prima riga. Clicca il Imposta cartella di output ... pulsante qui. La cartella CSS dovrebbe essere selezionata per impostazione predefinita. Fai clic su Imposta cartella di output e applica.
Aggiorna il tuo file index.html con questo codice e aggiorna il browser. Il tuo indice dovrebbe apparire come lo schermo qui sotto.
Scrivi i tuoi propri Sass Mixin Qualche testo va qui.
LiveReload offre le estensioni del browser per Firefox e Chrome, ma il modo più rapido per iniziare è copiare il seguente snippet di Javascript (dalla finestra LiveReload) nel file index.html, appena sopra la chiusura corpo etichetta. Una volta applicato questo frammento, LiveReload ascolterà le modifiche ai file HTML e Sass e aggiornerà automaticamente il browser: non più Command + R ogni pochi minuti.
Ora che abbiamo finito con le pulizie, possiamo iniziare a creare mix e lasciare che il nostro compilatore faccia il duro lavoro.
Come affermato in precedenza, utilizzo molte funzionalità CSS3 nei miei layout di pagina. Il problema con queste funzionalità all'avanguardia è che richiedono molti prefissi per i fornitori e non ho molta pazienza. Se riesco a scrivere un mixin una volta, invece di cinque linee fortemente duplicate di CSS ogni volta che voglio angoli arrotondati, lo farò.
I mixin sono identificati nei file Sass dal @mixin () dichiarazione. Ogni volta che un processore come LiveReload entra in questa sintassi, cerca argomenti all'interno delle parentesi e istruzioni simili a CSS all'interno delle parentesi graffe. Il compilatore interpreterà quindi queste istruzioni e produrrà puro CSS per il tuo foglio di stile, main.css in questo caso.
Apri il tuo file main.scss e copia il seguente codice di mixin. Quando fai clic su Salva, la finestra del browser con index.html dovrebbe ricaricarsi automaticamente e avrà un div grigio centrato con angoli arrotondati di 6px.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; # wrapper @include border-radius (6px, 6px, 6px, 6px); larghezza: 750 px; altezza: 250 px; sfondo: #eee; margine: 0 auto;
Quindi siamo partiti con il nostro primo mixin. Ma il mixin border-radius ha un punto debole: se applichiamo un bordo con un'opacità inferiore al 100%, lo sfondo verrà visualizzato. Non è esattamente una grande scelta di design in molti casi.
Fortunatamente abbiamo una soluzione semplice nella proprietà background-clip. Se non ti è familiare, Chris Coyier di CSS-Tricks ha una bellissima recensione sulla proprietà.
I mixin di Sass possono anche essere estesi con altri mixin. Questo ci permette di scrivere separatamente la clip di sfondo e creare un terzo mixin che lo chiama e le nostre regole border-radius dal passaggio precedente. Aggiungi il seguente codice al tuo file main.scss e salva. Dopo aver aggiornato il browser, dovresti vedere uno sfondo blu e un bordo blu-chiaro più trasparente semitrasparente.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combined-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); body background: lightblue; #wrapper width: 750px; altezza: 250 px; sfondo: #eee; margine: 0 auto; border: 15px solid rgba (255, 255, 255, 0,3); @include combined-radius (6px, 6px, 6px, 6px);
Sebbene inizialmente abbiamo duplicato un certo numero di righe, ora abbiamo un mixin riutilizzabile che può essere chiamato in qualsiasi momento fornendo i valori del raggio del bordo. E renderà correttamente.
Le ombre di testo sono un ottimo modo per eseguire trattamenti e pulsanti tipografici. Li uso spesso per stati di navigazione, schede o etichette selezionati. Sono anche uno degli elementi più irritanti, perché IE9 non li supporta, e non ci sono buone soluzioni alternative CSS.
Nonostante questo fatto sfortunato, sto includendo il codice di mix per gli altri browser moderni e IE 10 beta. Ho anche trovato uno script jQuery per il rendering di text-shadow in IE9 o inferiore.
Per i browser moderni, la proprietà text-shadow è strutturata in modo simile all'ombra del riquadro, con un offset orizzontale, verticale, sfocato e parametri di colore. Aggiungi il seguente codice ai tuoi file main.scss e index.html e dovresti vedere un'ombra sfocata 3px dietro il testo blu.
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ color; text-shadow: $ horizOffset $ vertOffset $ blur $ color; # wrapper, # wrapper-text-shadow width: 750px; altezza: 250 px; sfondo: #eee; margine: 0 auto 20px; imbottitura: 15px 0 0 15px; border: 15px solid rgba (255, 255, 255, 0,3); @include combined-radius (6px, 6px, 6px, 6px); # wrapper-text-shadow> p font-size: 36px; colore blu; @include text-shadow (0, 3px, 3px, # 333);
Index.html, aggiungi subito dopo il tag div # wrapper closing
Test dell'ombra del testo.
Per l'ultimo passaggio, ho creato mixin per ombre di riquadri, gradienti di sfondo, dichiarazioni di font @ face e rendering di tipi migliorati. Questi mix sono stati testati nei browser moderni (Firefox, Chrome, Safari, Opera, IE9) e includono tutti i prefissi specifici del fornitore.
Non entrerò nei dettagli di ciascuno; i commenti dettagliati sono inclusi nel file main.scss. I mixins seguono un formato di base e possono essere costruiti sulla base delle tue esigenze. Se hai bisogno di CSS, puoi scrivere un mixin per servirlo.
Aggiorna i tuoi file index.html e main.scss con il seguente codice. Dopo l'aggiornamento, dovresti vedere una finestra del browser contenente un numero di caselle, ognuna delle quali mostra un test di mixaggio diverso.
Solo un altro snippet di Textmate Box shadow test.Test di ombreggiatura della scatola.Test dell'ombra del testo.Test del gradiente di sfondo.@ test di font-face in Museo 700 sans.Migliora la leggibilità del testo e il test di crenatura.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combined-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) / * Blur è un parametro facoltativo, ma aiuta a rendere più sfumata l'ombra. Chiama il mixin applicando i valori in pixel per $ horizOffset, $ vertOffset e $ blur e un valore esadecimale per $ color. La regola border-collapse è inclusa per rendere le ombre correttamente in IE9. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color; box-shadow: $ horizOffset $ vertOffset $ blur $ color; border-collapse: separato; @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ blur, $ color) / * Stessi parametri di @mixin box-shadow, ma crea un'ombra interna per effetti premuti o incassati. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; -ms-box-shadow: $ horizOffset $ vertOffset $ sfocatura $ colore inset; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; @mixin background-gradient ($ direction, $ first-color, $ second-color) background: $ first-color; background-image: -webkit-linear-gradient ($ direction, $ first-color, $ second-color); background-image: -moz-linear-gradient ($ direction, $ first-color, $ second-color); background-image: -ms-linear-gradient ($ direction, $ first-color, $ second-color); background-image: -o-linear-gradient ($ direction, $ first-color, $ second-color); background-image: linear-gradient ($ direction, $ first-color, $ second-color); @include background-clip; @mixin typography ($ font-name, $ font-longname) / * Assicurati di creare una directory / fonts allo stesso livello della directory / css per assicurarti che le stringhe url di seguito funzionino correttamente. I caratteri Web includeranno il nome breve da utilizzare nelle dichiarazioni della famiglia di caratteri e il nome lungo necessario per i riferimenti URL. Il mixin dovrà essere invocato con la dichiarazione @include immediatamente sotto per caricare correttamente i font. * / @ font-face font-family: $ nome-font; src: url ("... / fonts /" + $ font-longname + ".eot"); src: local ('☺'), url ("... / fonts /" + $ font-longname + ".woff") format ('woff'), url ("... / fonts /" + $ font-longname + " .ttf ") format ('truetype'), url (" ... / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") format ('svg'); font-weight: normal; stile font: normale; @include typography ("Museo700", "Museo700-Regular-webfont"); tipografia @include ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin miglior-leggibilità / * Il mixin di miglior leggibilità è raccomandato per le intestazioni e quantità minori di testo a causa del rendering dei font più dispendioso in termini di risorse. Non è raccomandato per i dispositivi mobili. Per ulteriori informazioni, consultare l'articolo MDN (https://developer.mozilla.org/en-US/docs/CSS/text-rendering) o Gigaom (http://gigaom.com/2010/08/12/ ottimizelegibility-for-clearer-text-in-your-browser /). Esegui l'ispezione in Chrome o Safari e attiva il rendering del testo: ottimizza la regola di accessibilità e disattivala per vedere l'effetto sul kerning. Attiverà anche legature su caratteri che supportano set estesi. * / text-rendering: optimizeLegibility; @include text-shadow (0, 0, 1px, transparent); body background: lightblue; font-family: Helvetica, Arial, sans-serif; font-weight: normal; # wrapper, # wrapper-inset-shadow, # wrapper-text-shadow, # wrapper-background-gradient, # wrapper-font-family, # wrapper-improve-legibility width: 750px; altezza: 250 px; sfondo: #eee; margine: 0 auto 20px; imbottitura: 15px 0 0 15px; border: 15px solid rgba (255, 255, 255, 0,3); @include combined-radius (6px, 6px, 6px, 6px); #wrapper @include box-shadow (0, 3px, 3px, # 333); # wrapper-inset-shadow @include box-shadow-inset (0, 3px, 3px, # 333); # wrapper-text-shadow @include text-shadow (0, 3px, 3px, # 333); font-size: 36px; colore blu; # wrapper-background-gradient @include background-gradient (top, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-improve-legibility> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; font-weight: normal; font-size: 48px; @include migliorare la leggibilità; 
I mixin di Sass sono un ottimo modo per essere subito operativi con CSS3. Sia che si stia eseguendo il wireraming in codice, sia che si costruisca un intero sito da zero, i mixin miglioreranno il flusso di lavoro riducendo le righe digitate e il tempo speso per la revisione della sintassi.
Poiché queste funzioni sono incentrate su CSS3, è necessario disporre di un piano di backup per i browser più vecchi. Per alcuni siti, gli angoli arrotondati e le ombre non sono critici, ed è perfettamente accettabile mostrare un layout visivo degradato. Per altri, un polyfill come Modernizr può fornire classi specifiche per le funzionalità per scrivere regole CSS di fallback.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
