Share
I gradienti CSS hanno una sintassi piuttosto confusa, resa ancora peggiore una volta aggiunti i prefissi dei fornitori. Quindi, in questo tutorial, renderemo la generazione del colore gradiente più intuitiva con un Mixin LESS.
Il nostro mixin soddisferà tre tipi di gradienti CSS, vale a dire lineare, radiale, e ripetendo. Avremo un paio di impostazioni per manipolare l'output del gradiente, incluso il tipo di sfumatura, la combinazione di colori e l'orientamento del gradiente.
Ecco una demo di qualcosa che saremo in grado di creare con il mixin risultante:
Ora vediamo come lo costruiamo!
Per cominciare, esamineremo la sintassi che forma i tre tipi di sfumatura, aiutandoci eventualmente a guidare il nostro Mixin.
// 1. gradiente lineare background-image: linear-gradient (90deg, # ED4264, #FFEDBC); // 2. gradiente radiale background-image: radial-gradient (circle, # ED4264, #FFEDBC); // 3. ripetizione (lineare) del gradiente ripetuto-lineare-gradiente (90 °, # ED4264, #FFEDBC);
Questi sono i moduli di sintassi del gradiente CSS, secondo lo standard W3C. I prefissi dei fornitori sarebbero necessari per supportare i browser più vecchi.
Tieni presente che esiste una discrepanza con il modo in cui i browser più vecchi (quando si utilizza la sintassi prefissata) rendono l'orientamento del gradiente lineare.
Prima era il caso 90deg (che abbiamo specificato per formare un gradiente lineare) si estendere il gradiente dal basso verso l'alto, a partire dal # ED4264 a #FFEDBC. 0deg è stato interpretato come da sinistra a destra. La specifica finale, d'altra parte, lo afferma 0deg sta puntando dal basso verso l'alto, quindi 90deg si estende invece il gradiente da destra a sinistra.
I quirks si verificano anche con i valori delle parole chiave utilizzati per definire l'orientamento del gradiente. Le specifiche precedenti utilizzavano le parole chiave superiore, sinistra, destra e parte inferiore, mentre la versione finale aggiunge a, quindi verso l'alto, a sinistra, a destra, e in fondo.
La seguente demo mostra due gradienti ugualmente costruiti, ognuno dei quali utilizza i valori 90 gradi, # ED4264, #FFEDBC. Quello a sinistra usa i prefissi e quello a destra usa la sintassi moderna.
I valori dell'angolo sono più affidabili per il nostro caso. Possiamo facilmente convertire il vecchio comportamento dell'angolo, nonostante la discrepanza, per comportarci come nella specifica finale con una semplice sottrazione.
x = 90 - y
Il y è l'angolo che abbiamo specificato per la sintassi standard, mentre il X è il valore da utilizzare nella sintassi prefissa.
Allora, creiamo il Mixin. Chiameremo semplicemente il nostro Mixin .pendenza(), come segue:
.gradiente (@variables) quando (@conditions)
Il Mixin passerà un numero di variabili per specificare il tipo di sfumatura, le combinazioni di colori, i prefissi del fornitore per la compatibilità con le versioni precedenti e indice, così come il condizioni per iterare il Mixin.
Imposteremo i valori predefiniti per la direzione e i prefissi del venditore. Pertanto, a meno che non vogliamo cambiare la direzione del gradiente, dovremo solo specificare il genere e il colori.
Ecco una ripartizione dei valori di cui abbiamo bisogno:
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) quando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // lo stile va qui
Vale la pena notare che la maggior parte delle funzionalità di LESS come Loop sono radicate in Mixins. Quindi, anche se stiamo tecnicamente creando un Loop qui, possiamo ancora chiamarlo Mixin. Il motivo per cui stiamo usando un Loop è perché abbiamo bisogno di generare più istanze del sfondo o immagine di sfondo proprietà per dichiarare il gradiente, in questo modo:
background-image: -webkit-linear-gradient (90deg, red, blue); background-image: -moz-linear-gradient (90deg, red, blue); background-image: -ms-linear-gradient (90deg, red, blue); background-image: -o-linear-gradient (90deg, red, blue); background-image: linear-gradient (0deg, red, blue);
Questa è la sintassi completa per generare un gradiente CSS, fornendo un fallback per alcuni browser precedenti con sintassi prefissata.
Per generare tutte queste regole, dovremmo innanzitutto recuperare ciascun prefisso definito in @prefixes variabile e convertire il valore dell'angolo impostato nel @dir. Quindi, formiamo la sintassi del gradiente con il cosiddetto Escaping e l'interpolazione.
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) quando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)";
L'escaping è utile quando si tratta di generare una sintassi CSS non standard o una stringa arbitraria che potrebbe non essere riconosciuta da LESS. LESS produrrà il codice esattamente come lo trova, con l'unica eccezione delle variabili interpolate. MENO sostituirà ancora questi con i rispettivi valori.
Infine, genereremo la sintassi standard, che deve essere emessa dopo tutti i valori prefissati. Questo istruisce i browser di supporto a prenderlo al posto della sintassi prefissa. Per fare ciò, avvolgiamo la sintassi standard all'interno di Mixin Guard, come segue:
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) quando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)"; & when (@index = length (@prefixes)) background-image: ~ "@ type -gradient (@ dir, @ colors)";
Impostiamo una condizione che emetterà la sintassi quando il indice l'iterazione corrente è uguale al numero dei prefissi impostati in @prefixes. Poiché l'iterazione del ciclo inizia dal numero più grande e poi scende a 0, la sintassi standard verrà generata insieme alla prima sintassi prefissa, che in questo caso è -o-.
Il nostro gradiente Mixin è tutto pronto, possiamo usarlo ora!
Come accennato, siamo solo necessario per specificare il tipo di sfumatura e i colori, ad esempio:
.gradiente (lineare; # 2BC0E4, # EAECC6);
Si noti che ogni parametro deve essere separato con a ;. Utilizziamo una virgola per elencare i colori e i prefissi dei fornitori.
Se si desidera personalizzare la sosta colore, è possibile scrivere:
.gradiente (lineare; # 2BC0E4, # EAECC6 30%);
La modifica della direzione del gradiente deve essere eseguita con un valore dell'angolo invece della controparte parola chiave:
.gradiente (lineare; # 2BC0E4, # EAECC6 30%; 180 gradi);
Quello che segue è un esempio in cui creiamo un gradiente radiale:
.gradiente (cerchio; # 2BC0E4, # EAECC6);
Generazione di un gradiente ripetuto? Nessun problema:
.gradiente (ripetuto-lineare; # 085078, # 2BC0E4 25px, # EAECC6 50px);
In questo caso, assicurati di regolare il background-size di conseguenza per vedere il risultato desiderato.
In questo tutorial, abbiamo creato un Mixin per rendere più incisiva la generazione del gradiente CSS. Abbiamo anche imparato fuga e interpolazione lungo la strada.
Inoltre, il nostro gradiente Mixin è un buon esempio dell'utilizzo di Loop. Invece di elencare tutta la sintassi prefissa in questo modo:
.radial (@direction: 50% 50%, @origin: #fff, @end: # 000) background-color: # e9b90f; background-image: -webkit-gradient (radiale, @ direction, 0, @ direction, 200, from (@end), to (@origin)); background-image: -webkit-radial-gradient (@direction, @origin, @end); background-image: -moz-radial-gradient (@direction, @origin, @end); background-image: -o-radial-gradient (@direction, @origin, @end); background-image: -ms-radial-gradient (@direction, @origin, @end); background-image: radial-gradient (@direction, @origin, @end);
... iteriamo attraverso una lista di prefissi da una variabile, emettendo ciascuno di essi mentre procediamo. Possiamo combinare più colori in combinazione, così come specificare le fermate senza restrizioni. Questo mixin è davvero abbastanza flessibile.
L'unico elemento mancante è la sintassi proprietaria di Internet Explorer DXImageTransform.Microsoft.gradient, anche se vorrei incoraggiare tutti a guardare al futuro e Microsoft Edge invece!
Accentsconagua