Bourbon on the Rocks fantastiche funzioni per migliorare il tuo Sass

Bourbon offre una manciata di funzioni super utili che sono una gradita aggiunta alle funzioni native fornite da Sass. Diamo un'occhiata ad alcuni fantastici esempi che dovresti considerare di aggiungere al tuo bicchiere.

funzioni

Dove i mixin ci aiutano a ripetere blocchi di stili in modo più efficiente, le funzioni di Sass ci aiutano con la logica: accettare argomenti e restituire valori. Bourbon fornisce alcune funzioni Sass molto pratiche per una varietà di casi d'uso. In questo tutorial daremo un'occhiata alla seguente selezione:

• rapporto aureo()
• modulare scala ()
• lineare gradiente
• tinta()
• ombra ()
• em ()

rapporto aureo()

Con questa funzione, è molto facile calcolare il rapporto aureo (1: 1,6180339) di un certo numero. A titolo di heads up, dovrei menzionare che questa funzione viene lentamente deprecata, lasciando il posto a modulare scala () funzione invece. Il rapporto aureo() la funzione è utile se si desidera creare relazioni "significative" all'interno della propria tipografia, ad esempio. Lo stesso vale per le relazioni strutturali all'interno del layout.

Scala tipografica

Se si desidera generare una scala modulare per strutturare varie dimensioni di tipo utilizzando la sezione aurea, è possibile applicare questa funzione per calcolare il valore media d'oro per qualsiasi numero Costruire la tua scala tipografica con essa è semplice:

Il primo parametro della funzione prevede a pixel o em valore: qui rappresentato da una variabile Sass definita sopra. Il secondo parametro richiede un numero intero come a valore di incremento / decremento (... -3, -2, -1, 0, 1, 2, 3 ...) per spostarsi su e giù per la scala usando la sezione aurea.

Ecco la nostra scala tipografica utilizzando la sezione aurea:

Sass:

$ base-font-size: 10px body font-size: $ base-font-size .footnote font-size: golden-ratio ($ base-font-size, -1) // decrementa il valore della dimensione proporzionale al golden ratio per factor 1 h3 dimensione carattere: golden-ratio ($ base-font-size, 1) h2 dimensione carattere: golden-ratio ($ base-font-size, 2) // incremento dimensione valore proporzionale a golden ratio per fattore 1 h1 font-size: golden-ratio ($ base-font-size, 3) 

Uscita CSS:

body font-size: 10px;  .footnote font-size: 6.18px;  h3 font-size: 16.18px;  h2 font-size: 26.179px;  h1 font-size: 42.358px;  

Se è necessario arrotondare l'output, è possibile utilizzare le funzioni integrate di Sass a tale scopo:

• addominali()
• pavimento()
• ceil ()

Sass:

.footnote font-size: floor (golden-ratio ($ base-font-size, -1)) 

Sotto il cappuccio

Internamente, la funzione golden-ratio utilizza la funzione di scala modulare, con la variabile di scala $ dorata per golden-ratio.

Sass:

@function golden-ratio ($ value, $ increment) @return modular-scale ($ value, $ increment, $ golden) 

Nota: La fantastica griglia di Bourbon Neat usa anche la sezione aurea per impostazione predefinita per grondaie e colonne.

modulare scala ()

Se sei in "tipografia più significativa" e desideri calcolare una scala modulare per varie dimensioni di carattere, in base a una sorta di relazione numerica, questa funzione potrebbe essere interessante per te. Può calcolare varie scale modulari per te: la sezione aurea è solo una delle diciassette opzioni pre-cotta.

Sass:

$ base-font-size: 10px // La tua scelta del rapporto salvato in una variabile per cambiarlo in un posto // Qui ho usato il rapporto di due ottave $ tipo-di-scala: $ double-ottava body font-size: $ base-font-size .footnote font-size: modular-scale ($ base-font-size, -1, $ type-of-scale) h3 font-size: modular-scale ($ base-font-size, 1 , $ tipo-di-scala) h2 dimensione carattere: scala modulare ($ base-font-size, 2, $ tipo-di-scala) h1 dimensione carattere: scala modulare ($ base-font-size, 3 , $ tipo di scala) 

Variabili di ridimensionamento

Bourbon ha preparato queste variabili di rapporti predefiniti per varie scale. Per creare un design coerente, sarebbe una buona decisione non mischiare rapporti diversi per la scala tipografica in un progetto. Mantenerlo di classe decidendo su un rapporto che rispecchia meglio le tue intenzioni.

Sass:

$ base-font-size: 10px h2 font-size: modular-scale ($ base-font-size, 2, 1.6180) 

lineare-gradiente ()

Se hai bisogno di un gradiente lineare in combinazione con il mixin dell'immagine di sfondo, questa funzione ti farà risparmiare un bel po 'di codice. Il colore del gradiente è definito dal colore iniziale, il colore finale e facoltativo stop-colore punti nel mezzo. Queste interruzioni di colore aggiuntive ti danno la possibilità di creare transizioni più sofisticate tra i colori di partenza e di arrivo o di fornire un gradiente più colorato.

Dai un'occhiata a questo orribile gradiente. Qui penso che sia facile vedere come lineare-gradiente () la funzione funziona e come puoi utilizzarla:

Sass:

.orribile-gradiente + sfondo-immagine (gradiente lineare (45deg, // directon della sfumatura rosso 10%, // iniziale colore giallo 15%, // S // sanguina in rosso giallo 40%, // T arancione 45% , // O // sanguina in giallo arancio 50%, // P arancione 70%, // S // sanguina in verde verde 90%) // termina colore) altezza: 50 px 

Per i colori puoi opzionalmente fornire %, px o em valori. Questi definiscono la distanza che questo colore dovrebbe allungare. Probabilmente dovresti continuare a usare % il più delle volte però. Se non si forniscono percentuali come valori limite, i colori si estenderanno uniformemente, divisi per il numero di colori nel gradiente.

Puoi opzionalmente fornire un angolo per il primo parametro, sia in forma di valore + deg o a con direzione:

• 45 gradi
• 90deg
• a sinistra in alto
• a destra
• a sinistra

e così via.

Sass: con il parametro direction-left to right

.gradiente + immagine di sfondo (gradiente lineare (a destra, giallo 50%, blu 60%)) altezza: 50 px 

Il gradiente scorre da sinistra a destra

O qualcosa di più sofisticato HSLA () funzioni e multiplo lineare-gradiente () funzioni:

Sass:

.gradiente + sfondo-immagine (gradiente lineare (hsla (0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, trasparente 50%), gradiente lineare (# 4e7ba3, scurire (# 4e7ba4, 10%))) altezza: 50px 

Funzioni di colore tinta e sfumatura

Potresti già avere familiarità con le funzioni integrate di Sass per colori come alleggerire() e scurire() che fanno esattamente quello che ti aspetteresti. Bourbon offre due funzioni di colore aggiuntive per la tua convenienza. Entrambe le funzioni prendono un parametro di colore e percentuale per mettere a punto il mix di colori.

tinta()

La funzione tinta cambia un colore mescolandolo con il bianco. Si aspetta un secondo parametro che prende la percentuale di bianco con cui vuoi mescolare il colore.

Sass:

$ blu chiaro: # 2F7DD1 .tint sfondo: tinta ($ azzurro-chiaro, 25%) altezza: 100 px 

Questo è senza tint ():

E questo è con tint ():

ombra ()

La funzione di sfumatura cambia colore mescolandola con il nero. Questa funzione accetta anche un parametro di colore e percentuale per mettere a punto il mix di colori.

Sass:

$ blu chiaro: # 2F7DD1 .shade background: ombra ($ light-blue, 25%) height: 100px 

Qui vediamo cosa succede senza ombra ():

E qui con ombra ():

em ()

Questa funzione calcola i pixel in ems per te.

Sass:

font-size: em (12) 

Uscita CSS:

font-size: 0.75em; 

Saluti!

Questo è coperto Bourbon per ora. Nell'ultimo paio di tutorial abbiamo esaminato in dettaglio alcuni dei mixin e delle funzioni più utili che offre.

Nella parte successiva di questa serie in corso, daremo un'occhiata a Bourbon Neat: una griglia per Sass e Bourbon.