Share
In questo tutorial illustreremo cosa si può fare con gli stili Sass flessibili inclusi nel framework Foundation. Molti di questi offrono un set di funzionalità più personalizzabile rispetto a quello della versione CSS, in più ci sono scorciatoie che possono essere utilizzate per modellare elementi come la barra in alto in modo rapido e semplice.
Segui le istruzioni fornite in Configurazione di Foundation with Sass e Compass o nella documentazione di Zurb se hai bisogno di aiuto per configurare Foundation con Sass. Puoi usare la riga di comando per far funzionare le cose con Compass e Bourbon, o in alternativa puoi solo prendere i file Sass autonomi da GitHub, metterli nel tuo progetto e importare qualsiasi bit di cui hai bisogno.
Iniziamo con la griglia poiché questa è la base per Foundation. È anche un ottimo componente per mostrarti quanto può essere flessibile scss / sass.
Ad esempio, quando si usano i mixin disponibili per la griglia (i mixin, a proposito, sono come scorciatoie per il codice pre-scritto) è possibile creare le proprie classi o persino la propria griglia utilizzando alcune semplici variabili. Diamo un'occhiata al primo esempio che la Fondazione ti offre:
/ * Opzioni di mixin per creare righe * / @include grid-row ($ behavior); / * Il valore predefinito è false, che introdurrà gli stili di riga predefiniti * / $ behavior: false / * Se l'elemento che si sta creando come una riga è nidificato in un altro elemento * / / * che è anche una riga, è necessario per aggiungere gli stili di annidamento appropriati * / $ comportamento: nest / * Puoi usare questa opzione per comprimere i margini della riga del contenitore * / / * Questo è utile quando si lavora con i form all'interno della griglia * / $ comportamento: collapse / * Se si avere una riga nidificata e volere che venga compressa, è necessario aggiungere questa opzione * / $ comportamento: nest-collapse
Potete vedere qui che abbiamo un mixin (questi sono referenziati dal prefisso del segno '@') che ha parentesi contenenti una variabile. Iniziamo con il mixin @ include grid-row, specificando le sue opzioni tra parentesi.
Quando crei un mixin puoi specificare parti del codice pre-scritto da cambiare ogni volta che usi quel mixin. Un semplice esempio potrebbe essere quello di creare un mixin che aggiunge un font insieme alle sue dimensioni, peso, colore, ecc. Ma forse vuoi essere in grado di cambiare il colore del carattere ogni volta che usi il mixin. Questo sarebbe ciò che collochi tra parentesi.
In questo caso utilizziamo una variabile nel codice, le variabili possono essere utilizzate per memorizzare qualsiasi valore in Sass e iniziare con un segno '$'. Per esempio:
/ * qui creiamo il font mixin * / @mixin ($ color) font-family: 'Arial'; font-size: 14px; font-weight: 500; colore: $ colore; / * qui definiamo una variabile da usare al suo interno * / $ blue = # 0099cc; / * e qui in realtà utilizziamo il font mixin * / @include ($ blue);
Quindi in questo codice abbiamo creato un mixin con l'opzione personalizzabile del colore, al di sotto del quale abbiamo definito un colore usando una variabile $ blu poi seguendo che effettivamente usiamo il mixin, facendo riferimento tra parentesi la nostra variabile $ blu, che corrisponde al codice esadecimale # 0099cc.
Se facciamo riferimento al primo esempio di codice, vedrai $ comportamento usato più volte. Questo può sembrare un po 'strano e un'interpretazione comune è "Aspetta! Non è solo sovrascrivere la variabile ogni volta?". In sostanza si fornisce un valore per ogni opzione in un tipo di elenco, noto anche come array. Ogni volta che usi $ comportamento l'output corrisponderà all'opzione nell'ordine in cui sono dichiarati.
Puoi anche vedere più variabili nel tuo include:
@include grid-column ($ columns, $ last-column); / * L'opzione più comunemente usata con una colonna * / / * Imposta le proprietà della larghezza per la colonna, usa un numero per rappresentare colonne * / $ colonne: # / * Usa questa opzione se le colonne non aggiungono fino a 12. * / / * Facciamo in modo che l'ultima colonna di default sia mobile: right per mantenere le cose allineate * / / * Se non lo vuoi, imposta $ last-column su true * / $ last-column: false
Per mettere davvero questo in prospettiva, eseguiremo la creazione di una griglia usando solo HTML di base, poiché le classi non sono affatto vicine come necessario a causa di tutte le scorciatoie di stile impostate nel codice Sass stesso. Ecco un semplice esempio per costruire un'intestazione.
$ row-width: em-calc (600); $ column-gutter: em-calc (30); $ total-columns: 12! default; header @include grid-row; pannello @include; a parte @include grid-column (3); Section @include grid-column (9); articolo @include grid-row; header @include grid-column (2); Div @include grid-column (10);
Potete vedere qui che l'html è minimo e che sass calcola perfettamente il nesting, ho anche impostato alcuni valori globali per la larghezza massima, lo spazio tra le colonne e il numero di colonne. Da un punto di vista HTML questo consente di risparmiare un bel po 'di tempo, ma questi processi mentali dietro il layout possono essere un po' confusi per cominciare. Diamo un'occhiata ora ai pulsanti e come puoi manipolarli usando Sass.
Una delle cose belle di Sass è quanto velocemente puoi modellare le tue pagine e quanto tempo risparmia nel non dover duplicare il codice.
Puoi scorciatoiare allo stile del pulsante facilmente usando qualcosa di semplice come:
.nome della tua classe @include button;
Aggiungi in poche opzioni e in una sola riga di codice hai replicato uno stile che avrebbe richiesto sei o sette righe di CSS, che risparmio di tempo!
Noterai anche che per i pulsanti ci sono un sacco di opzioni che non esistono nella versione CSS e questo è vero per tutti gli elementi Sass. Ciò aggiungerà davvero un ulteriore livello di libertà rispetto alla versione CSS con cui potresti aver precedentemente lavorato. Di seguito è riportato un esempio di un pulsante creato utilizzando le variabili, quindi lo stesso, ma utilizzando i valori diretti, in modo da ottenere una buona idea di come funzionano.
.nome della tua classe @include button ($ padding, $ bg, $ radius, $ full-width, $ disabled, $ is-input); @include inset-shadow ($ active); . yourour class name @include button (1em, # ca2727, 2px, false, false, false); @include inset-shadow (true);
Questo è solo un semplice esempio, ma è un esempio su cui è probabile che si usi frequentemente. Quando il codice è compilato finirai con CSS come questo (e come puoi immaginare il codice di uscita impiegherebbe molto più tempo per scrivere rispetto a quello di Sass):
.link border-style: solido; larghezza del bordo: 1px; cursore: puntatore; font-family: inherit; font-weight: bold; altezza della linea: normale; margine: 0 0 1.25em; posizione: relativa; decorazione del testo: nessuna; allineamento del testo: centro; display: blocco in linea; padding-top: 1em; padding-right: 2em; padding-bottom: 1.0625em; padding-left: 2em; font-size: 1.25em; background-color: # ca2727; border-color: # 9f1f1f; colore bianco; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inserito; box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inserito;
Sebbene molti di voi vedranno Sass come un linguaggio ultraterreno, in realtà è molto veloce da riprendere una volta che hai scritto alcune righe. La struttura è leggermente migliorata rispetto ai CSS e se rimani bloccato puoi ricorrere al CSS usando SCSS quando hai assolutamente bisogno di.
Infine, uno dei meno scritti sulle funzionalità di Sass è la possibilità di aggiungere funzioni ai fogli di stile. Queste non sono funzioni dinamiche on-page (vengono eseguite quando si compila il codice Sass), tuttavia offrono interessanti opportunità per salvare ancora più tempo.
Ad esempio, in Foundation è disponibile una funzione per convertire px in em. Questo è fantastico per i siti responsive; imposta semplicemente il valore base em tramite:
$ em-base: 16px! default;
Quindi, ogni volta che si desidera utilizzare un valore em, per il quale normalmente si deve calcolare il pixel in em, è sufficiente utilizzare:
altezza: em-calc (46);
"46" è il numero di pixel e em-calc essendo la funzione. Puoi usarlo ovunque nel tuo codice Sass dove ti servirebbe un valore in pixel.
Nell'ultimo post ho parlato dei compilatori Sass e degli enormi benefici che hanno sulla compilazione manuale. Questa volta ti indicherò uno strumento che ho trovato utile su quasi tutti i progetti su cui ho lavorato.
Soprattutto quando parli di Foundation lavorerai con Sass, CSS, HTML e JavaScript, ma non dimentichiamo che gran parte del web design ruota intorno alle immagini, in particolare ai file png e jpg. È assolutamente necessario disporre di immagini ottimizzate per il Web, quindi utilizzando imageOptim (OS X) o File Optimizer (Windows).
Questi strumenti comprimono le immagini senza perdere nulla della qualità. In realtà è molto efficace e i tassi di compressione possono essere sconvolgenti, con alcune riduzioni fino al 70%. Pensaci; se carichi un png a 100kb potresti guardare un file da 30kb dopo la conversione. Questo può essere ancora più efficace se usi le immagini sprite.
Abbiamo esaminato le basi di Sass, come dovrebbe essere impostato, cosa puoi fare con esso e come può accelerare il tuo flusso di lavoro. Nel prossimo pezzo ci sposteremo in qualcosa di piuttosto eccitante; Fondazione per Rails. Ciò consentirà alcune fantastiche funzioni dinamiche che possono sedersi accanto a HTML, CSS e JavaScript.
Accentsconagua