Share
Gradientele CSS au o sintaxă destul de dezordonată, chiar și mai rău după ce adăugați prefixele furnizorilor. Deci, în acest tutorial, vom face ca generarea de culori Gradient să fie mai intuitivă cu un LESS Mixin.
Mixinul nostru va satisface trei tipuri de gradienți CSS, și anume liniar, radial, și repetarea. Vom avea câteva setări pentru a manipula ieșirea gradientului, inclusiv tipul de gradient, combinația de culori și orientarea în gradient.
Iată un demo de ceva ce vom putea crea cu rezultatul mixin:
Acum, să vedem cum o construim!
În primul rând, vom examina sintaxa care formează cele trei tipuri de gradienți, ajutându-ne în cele din urmă să ne conducem mixinul.
// 1. gradient liniar fundal-imagine: linear-gradient (90deg, # ED4264, #FFEDBC); // 2. gradient radial fundal-imagine: radial-gradient (cerc, # ED4264, #FFEDBC); // 3. repetarea (gradientul liniar) a gradientului repetat-linear (90deg, # ED4264, #FFEDBC);
Acestea sunt formele de sintaxă a gradientului CSS, conform standardului W3C. Prefixele furnizorilor ar fi necesare pentru a sprijini browserele mai vechi.
Rețineți că există o discrepanță cu modul în care browserele mai vechi (atunci când se utilizează sintaxa prefixată) fac orientarea gradientului liniar.
A fost cazul în cazul în care 90deg (pe care am specificat-o pentru a forma un gradient liniar) ar acoperi gradientul de jos în sus, pornind de la # ED4264 la #FFEDBC. 0deg a fost interpretat ca fiind de la stânga la dreapta. Specificația finală, pe de altă parte, afirmă acest lucru 0deg este indicat de jos în sus, prin urmare 90deg se întinde înclinația de la dreapta la stânga.
Cicluri apar, de asemenea, cu valorile cuvintelor cheie utilizate pentru a defini orientarea gradientului. Specificațiile anterioare au folosit cuvintele cheie top, stânga, dreapta și fund, în timp ce versiunea finală adaugă la, prin urmare sus, spre stanga, la dreapta, și spre fund.
Următoarea demonstrație arată două gradienți construiți la fel, fiecare folosind valorile 90deg, # ED4264, #FFEDBC. Cel din stânga utilizează prefixe, iar cel din dreapta utilizează sintaxa modernă.
Valorile unghiului sunt mai fiabile pentru cazul nostru. Putem converti ușor comportamentul unghiului vechi, în ciuda discrepanței, să ne comportăm la fel ca în specificația finală printr-o simplă scădere.
x = 90 - y
y este unghiul specificat pentru sintaxa standard, în timp ce X este valoarea de utilizat în sintaxa prefixată.
Atunci, să creăm mixinul. O să-i numim pe Mixin pur și simplu .gradient(), după cum urmează:
.gradient (@variables) atunci când (@conditions)
Mixin va transmite un număr de variabile pentru a specifica tipul de gradient, combinațiile de culori, prefixele furnizorilor pentru compatibilitate înapoi și index, la fel de bine ca condiţii pentru a repeta Mixin-ul.
Vom seta valorile implicite pentru direcția și prefixele furnizorului. Prin urmare, dacă nu vrem să schimbăm direcția de gradient, va trebui să specificăm doar tip si colorate.
Iată o defalcare a valorilor de care avem nevoie:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms; o; @index: length (@prefixes)) atunci când (@index> 0) .gradient (@type; @dir; @prefixes; (@index - 1)); // stilul merge aici
Este de remarcat faptul că majoritatea caracteristicilor LESS, cum ar fi Loop, au rădăcini în Mixins. Deci, deși suntem creați din punct de vedere tehnic un Loop aici, îl putem numi în continuare un Mixin. Motivul pentru care folosim o buclă este că avem nevoie să generăm mai multe instanțe din fundal sau imagine de fundal proprietatea de a declara gradientul, după cum urmează:
fundal-imagine: -webkit-gradient linear (90deg, roșu, albastru); fundal-imagine: -moz-linear-gradient (90deg, roșu, albastru); fundal-imagine: -ms-linear-gradient (90deg, roșu, albastru); fundal-imagine: -o-linear-gradient (90deg, roșu, albastru); fundal-imagine: gradient linear (0deg, roșu, albastru);
Aceasta este sintaxa completă pentru a genera un gradient CSS, oferind o alternativă pentru unele browsere mai vechi cu sintaxă prefixată.
Pentru a genera toate aceste reguli, ar trebui mai întâi să preluăm fiecare prefix definit în @prefixes variabilă și convertiți valoarea unghiului stabilită în @dir. Apoi, vom forma sintaxa de gradient cu așa-numitele Escaping și Interpolare.
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms; o; @index: length (@prefixes)) atunci când (@index> 0) .gradient (@type; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-vechi: 90 - (@dir); imagine de fundal: ~ "- @ prefix - @ type -gradient (@ dir-vechi, @ culori)";
Escaparea este utilă atunci când vine vorba de generarea unei sintaxe CSS non-standard sau a unui șir arbitrar care poate să nu fie recunoscut de LESS. LESS va scoate codul exact așa cum îl găsește, singura excepție fiind variabilele interpolate. Mai puțin, acestea vor înlocui aceste valori.
În cele din urmă, vom genera sintaxa standard, care trebuie extrasă după toate valorile prefixate. Aceasta instruiește browserele care o susțin să le adauge în locul sintaxei prefixate. Pentru a face acest lucru, înfășurăm sintaxa standard într-o Gardă Mixin, după cum urmează:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms; o; @index: length (@prefixes)) atunci când (@index> 0) .gradient (@type; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-vechi: 90 - (@dir); imagine de fundal: ~ "- @ prefix - @ type -gradient (@ dir-vechi, @ culori)"; & when (@index = lungime (@prefixes)) fundal-imagine: ~ "@ type -gradient (@ dir, @ culori)";
Am stabilit o condiție care va scoate sintaxa atunci când index din iterația curentă este egală cu numărul de prefixe stabilite în @prefixes. Pe măsură ce iterația buclei pornește de la cel mai mare număr și apoi coboară la 0, sintaxa standard va fi generată împreună cu prima sintaxă prefixată - care este în acest caz -o-.
Gradientul nostru Mixin este setat, îl putem folosi acum!
Așa cum am menționat, suntem singuri necesar pentru a specifica tipul de gradient și culorile, de exemplu:
.gradient (liniar; # 2BC0E4, # EAECC6);
Rețineți că fiecare parametru trebuie să fie separat cu un ;. Utilizăm o virgulă pentru a lista culorile și prefixele furnizorilor.
Dacă doriți să personalizați stopul de culoare, puteți scrie:
.gradient (liniar; # 2BC0E4, # EAECC6 30%);
Modificarea direcției gradientului trebuie făcută cu o valoare a unghiului în loc de omologul său de cuvânt cheie:
.gradient (liniar; # 2BC0E4, # EAECC6 30%; 180deg);
Următorul este un exemplu în care se creează un gradient radial:
.gradient (cerc; # 2BC0E4, # EAECC6);
Generarea unui gradient repetat? Nici o problemă:
.gradient (repetare-liniară; # 085078, # 2BC0E4 25px, # EAECC6 50px);
În acest caz, asigurați-vă că ajustați background-size în consecință, pentru a vedea rezultatul dorit.
În acest tutorial, am creat un Mixin pentru a face ca generarea gradientului CSS să fie mai precisă. De asemenea, am învățat evadarea și interpolare pe parcurs.
În plus, gradientul nostru Mixin este un bun exemplu de utilizare a buclă. În loc să listați toate sintaxele prefixate astfel:
.radial (@ direcție: 50% 50%, @origin: #fff, @end: # 000) culoarea fundalului: # e9b90f; fundal-imagine: -webkit-gradient (radial, @ direcție, 0, @ direcție, 200, de la (@end), la (@origin)); fundal-imagine: -webkit-gradient radial (@direction, @origin, @end); imaginea de fundal: -moz-radial-gradient (@direction, @origin, @end); fundal-imagine: -o-radial-gradient (@ directionare, @origin, @end); imaginea de fundal: -ms-gradient radial (@ direcție, @origin, @end); fundal-imagine: radial-gradient (@direction, @origin, @end);
... iteram printr-o listă de prefixe dintr-o variabilă, ieșind fiecare în timp ce mergem. Putem combina mai multe culori în combinație, precum și să specificăm opririle fără restricții. Acest Mixin este într-adevăr destul de flexibil.
Singura piesă lipsă este sintaxa de proprietate Internet Explorer DXImageTransform.Microsoft.gradient, deși aș încuraja pe toți să se uite la viitor și Microsoft Edge în schimb!
Accentsconagua