Mixin sass: mantieni i tuoi fogli di stile ASCIUTTI

Uno dei miei vantaggi preferiti dell'utilizzo di Sass è che rende l'automazione del flusso di lavoro di progettazione front-end un gioco da ragazzi. Esistono molti strumenti JavaScript per lavorare con i file e automatizzare altre attività, ma le funzionalità di mixin integrate di Sass consentono di scrivere codice in stile front-end modulare. In questo articolo, ho elencato dieci dei miei mixin Sass preferiti per automatizzare la scrittura di stili web.

Questi sono i mixin Sass che uso per quasi tutti i progetti web su cui lavoro. Ci sono molti articoli interessanti con alcuni utili mixin di Sass in tutto il web. Ci sono anche alcune buone librerie di mixin Sass che sono ottime per compiti più piccoli, come Bourbon. Un'altra grande libreria di mixin da cui ho derivato alcuni dei mixin di seguito è Andy.

I mixin che esaminerò in questo articolo trattano di quanto segue:

• Query sui media
• Temi di colore
• Elementi di centraggio
• Clearfix
• Dimensioni dei caratteri coerenti
• Transizioni di animazione
• Immagini retina
• Sfumature veloci
• Caratteri esterni
• Riempimento/margini rapidi

Query sui media

Le media query ti consentono di aggiungere facilmente punti di interruzione personalizzati ai tuoi fogli di stile e aggiungere rapidamente un comportamento reattivo personalizzato all'interno di un elemento per diversi punti di interruzione. Tuttavia, le query multimediali sui fogli di stile possono diventare rapidamente causa di mal di testa, specialmente quando si tratta di mantenerle lungo la strada. Con Sass mixin tutto ciò può cambiare.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Con questi definiti, i mixin possono essere utilizzati come segue:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Funziona benissimo da solo o con altri framework di griglia come Bootstrap.

L'istruzione if emetterà una query multimediale sintonizzata su una particolare dimensione dello schermo a seconda del nome della dimensione fornito al mixin. Ciò ti consentirà di regolare facilmente il comportamento dei tuoi attributi CSS di conseguenza. Puoi anche personalizzare il punto in cui desideri modificare i tuoi attributi CSS. Di solito, i layout più reattivi si attengono a 3 o 4 dimensioni di larghezza dello schermo definite per regolare il contenuto. La variazione delle dimensioni dello schermo, dei dispositivi e delle applicazioni è in continua espansione, ma esiste una tendenza popolare che molti sviluppatori Web utilizzeranno per i loro layout; dimensioni dello schermo ridotte per telefoni, medie per tablet, grandi per laptop ed extra large per computer desktop.

Per riferimento, i punti multimediali utilizzati in Bootstrap v3 sono:

• larghezza massima: 767px (qualsiasi schermo fino a 767px di larghezza)
• min-width: 768px (qualsiasi schermo più largo di 768px)
• min-width: 992px (qualsiasi schermo più largo di 992px)
• min-width: 1200px (qualsiasi schermo più largo di 1200px)

Temi di colore

La definizione di un tema colore da utilizzare nel tuo sito consente di risparmiare tempo avendo le stesse porzioni colorate di CSS sugli stessi elementi HTML. Se vuoi che tutti i tuoi pulsanti div abbiano un bordo punteggiato solido di 1px, puoi facilmente aggiungerlo al tuo tema. Questo mixin Sass ti consentirà di impostare tutte le variabili di colore che desideri e di influenzare tutte le classi che desideri. Questo può essere uno strumento utile per fornire opzioni di colore per qualcosa o ogni volta che hai una funzione che influisce sul colore di molti elementi contemporaneamente. C'è un ottimo articolo qui con maggiori informazioni su come lavorare con i temi colore in Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Una volta impostato un tema colore approfondito, eliminerai il 70% dello stile relativo al colore se eseguito correttamente. Consiglierei anche di separare questo file .scss dagli altri file .scss e di includere tutte le variabili di colore del tuo marchio nello stesso file.

Una riga semplice come:

 @include theme(theme-banana, yellow);

emetterà:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elementi di centraggio

A seconda del layout, ci sono molti modi diversi per allineare al centro un elemento nei tuoi stili. Il metodo seguente utilizza il posizionamento assoluto e ti consentirà di definire elementi verticali, orizzontali o entrambi centrati. L'elemento genitore dovrà avere posizione: relativo. Ciò consente di definire facilmente la posizione centrata di un elemento in 2 brevi righe di codice.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Questo mixin è uno dei modi più versatili per centrare i contenuti, ma vale la pena notare che ci sono molti modi diversi per centrare i tuoi contenuti e questa potrebbe non essere sempre la soluzione migliore. A seconda dello stile del layout e della compatibilità con il browser, potresti voler centrare i tuoi contenuti in un modo diverso. Flexbox è un altro strumento popolare e molto utile per l'allineamento, anche se al momento non è completamente supportato dai vecchi browser. Il testo semplice e l'allineamento del contenitore possono essere eseguiti facilmente senza questo mixin, utilizzando semplici proprietà CSS. Questo ti aiuterà di più quando crei layout e lavori con contenitori all'interno di altri contenitori.

Clearfix

Applicare la proprietà css clearfix in modo rapido ed efficace agli elementi. Ci sono molte soluzioni clearfix in giro per il web e questa sembra funzionare al meglio. È anche facile da usare una volta creato il mixin Sass.

Questo mixin trarrà vantaggio ogni volta che hai un contenuto che fluttua a destra o a sinistra e vuoi liberare lo spazio sotto l'elemento mobile per inserire un nuovo contenuto sotto.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Dimensioni dei caratteri coerenti

Imposta una dimensione del carattere rem nel tuo documento, da utilizzare per tutti i tuoi elementi di testo. Questo è un modo migliore per scalare su e giù i caratteri invece di em. L'uso di em si comporrà in base agli altri attributi CSS, ma rem si aumenterà o diminuirà solo in base alla dimensione che definisci nel tuo documento HTML. Separare un file .scss per tutta la tua tipografia e utilizzare il mixin di seguito per definire le dimensioni dei caratteri predefinite automatizzerà drasticamente il flusso di lavoro di codifica della tipografia.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Questo mixin crea anche un pixel di fallback per i browser che non supportano rem (IE8 e precedenti). Quando il browser non supporta il ridimensionamento rem, il mixin calcolerà l'equivalente in pixel della dimensione rem iniziale impostata e restituirà i valori sia pixel che rem per un elemento.

Animazione

Definisci rapidamente le proprietà dell'animazione e aggiungile ai tuoi elementi. Attualmente, la proprietà CSS dell'animazione necessita ancora dei prefissi del fornitore, quindi anche questo aggiungerà questo al mix.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

La prima parte del mixin aggiungerà i prefissi dei fornitori appropriati necessari per la compatibilità del browser. La sezione successiva lo configura per inserire le stringhe e le proprietà personalizzate. La sezione finale del mixin è dove creeresti il ​​tuo nome mixin (in questo caso: dissolvenza in uscita) e definiresti cosa vorresti accadesse ad ogni fotogramma chiave nell'animazione. Questa configurazione di esempio è molto semplice e puoi aggiungere modifiche a qualsiasi percentuale della durata dell'animazione.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

L'esempio qui prenderà l'elemento mirato allo 0% dell'animazione (inizio) e trasformerà la proprietà dall'opacità completa (opacità: 1;) all'assenza di opacità e sostanzialmente scomparendo (opacità: 0;) al 90% dell'animazione . Quindi, se imposto l'animazione in modo che abbia una sequenza temporale di 5 secondi, l'elemento scomparirà dopo 4,5 secondi (90% dell'animazione di 5 secondi). L'ultima proprietà che definisco nell'uso del mixin (il "3") è il numero di volte in cui l'animazione si ripeterà.

Immagini della retina

Aggiungi immagini ad alta risoluzione al tuo sito, con un fallback per i dispositivi che non visualizzano immagini ad alta risoluzione. Quando si utilizzano immagini retina, consiglierei di comprimere il più possibile senza distruggere l'immagine. Un buon strumento per questo è TinyPNG (supporta PNG e JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Questo mixin ti consentirà di aggiungere una regola nello stesso punto della proprietà CSS che definisce l'immagine originale.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

In precedenza, l'unica soluzione CSS a questo era utilizzare le query multimediali e questa soluzione è molto più semplice e pulita. Per ulteriori pensieri e idee su questo mixin, dai un'occhiata a questo articolo.

Gradienti veloci

Aggiungi facilmente sfumature che definiscono solo il colore iniziale, il colore finale e il tipo di sfumatura. Aggiungi tutte le proprietà del gradiente e puoi scegliere se necessario. Il tipo di sfumatura consente di scegliere tra una sfumatura verticale, una sfumatura orizzontale o una sfumatura radiale (a forma di sfera).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Non dovrai più ricordare i vari prefissi dei fornitori e gli ordini dei parametri per l'implementazione dei gradienti.

 .foo { @include background-gradient(red, black, 'vertical'); }

Caratteri esterni

Usando la proprietà CSS font-face, possiamo facilmente aggiungere font in una directory e includere tutti i tipi di font. Quando si utilizzano file di caratteri, browser diversi hanno una compatibilità diversa con i tipi di file. Questo mixin aiuta a risolverlo utilizzando qualsiasi file di font rilevante in una directory.

Includi semplicemente qualsiasi file di font in una directory e aggiungi il tag "@include" nei tuoi stili, che prenderà tutti i file dalla cartella scelta.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Questo mixin si occuperà della definizione di URL di formati di carattere alternativi, comprese le strane soluzioni alternative necessarie per la compatibilità con le versioni precedenti.

Imbottitura e margini rapidi

Il motivo principale per cui lo uso è perché ometterò una proprietà di riempimento specifica, come a volte padding-left, e non voglio definirla. Usando la proprietà Sass null, puoi omettere le proprietà di riempimento. Le stesse regole si applicano ai margini.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Il missaggio può quindi essere utilizzato per sostituire una serie di proprietà padding-* e margin-* nei fogli di stile. Puoi includere rapidamente questo mixin in qualsiasi elemento e definire solo i lati del padding/margini che desideri includere. Il riempimento e i margini sono uno degli stili CSS più utilizzati aggiunti agli elementi e un piccolo risparmio di tempo come questo si aggiungerà rapidamente.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Incartare

L'uso dei mixin Sass come quelli descritti in questo articolo è un ottimo modo per rendere più efficiente il flusso di lavoro. Questi mixin specifici ti aiuteranno a dedicare meno tempo alle attività web comuni, dandoti più tempo per concentrarti su altri aspetti del progetto che richiedono una visione più attenta e competente.

L'installazione e l'utilizzo di Sass possono essere eseguite in diversi modi e comporteranno l'utilizzo del prompt dei comandi per installare alcune librerie nel progetto. Un modo per installare Sass è utilizzare Ruby - come descritto qui sul sito Web principale di Sass - e un altro modo popolare è utilizzare Node.js.

I vantaggi di Sass vanno oltre l'automazione e possono aiutare a creare e gestire facilmente i fogli di stile del progetto. Anche alcuni dei progetti web più elementari possono avere migliaia di righe di codice CSS. Sass è un ottimo modo per suddividere questo codice in bit più gestibili, ognuno con il proprio focus.