Share
CSS-gradienter har ganske rotete syntaks, gjort enda verre når du legger til leverandørprefikser. Så i denne opplæringen skal vi gjøre Gradient-fargegenerasjon mer intuitiv med en mindre Mixin.
Vår Mixin vil imøtekomme tre typer CSS-gradienter, nemlig lineær, radial, og gjenta. Vi vil ha et par innstillinger for å manipulere gradientutgangen, inkludert gradienttypen, fargekombinasjonen og gradientretningen.
Her er en demonstrasjon av noe vi kan skape med den resulterende mixin:
La oss se hvordan vi bygger den!
Til å begynne med undersøker vi syntaksen som danner de tre gradienttypene, og hjelper oss til å drive vår Mixin.
// 1. lineær gradient bakgrunnsbilde: lineær gradient (90deg, # ED4264, #FFEDBC); // 2. Radial gradient bakgrunnsbilde: Radial-gradient (sirkel, # ED4264, #FFEDBC); // 3. Repeterende (lineær) gradient gjentagende lineær gradient (90deg, # ED4264, #FFEDBC);
Dette er CSS-gradient-syntaksformene, i henhold til W3C-standarden. Leverandørens prefikser kreves for å støtte eldre nettlesere.
Husk at det er uoverensstemmelse med hvor eldre nettlesere (når du bruker prefiks syntaks) gjengir lineær gradientorientering.
Det pleide å være tilfelle at 90deg (som vi angav for å danne en lineær gradient) ville spore gradienten fra bunn til topp, med utgangspunkt i # ED4264 til #FFEDBC. 0deg ble tolket som fra venstre til høyre. Den endelige spesifikasjonen sier derimot at 0deg peker fra bunn til topp, dermed 90deg spenner over gradienten fra høyre til venstre i stedet.
Quirks forekommer også med søkeordverdiene som brukes til å definere gradientretningen. Tidligere spesifikasjoner brukte søkeordene topp, venstre, Ikke sant og bunn, mens den endelige versjonen legger til til, derav til toppen, til venstre, til høyre, og til bunnen.
Følgende demo viser to like bygget gradienter, hver med verdiene 90deg, # ED4264, #FFEDBC. Den til venstre bruker prefikser, og den til høyre bruker moderne syntaks.
Vinkelverdier er mer pålitelige for vårt tilfelle. Vi kan enkelt konvertere den gamle vinkeladferansen, til tross for uoverensstemmelsen, for å oppføre seg som i den endelige spesifikasjonen med en enkel subtraksjon.
x = 90 - y
De y er vinkelen vi angav for standard syntaks, mens x er verdien som skal brukes i den forhåndsdefinerte syntaksen.
La oss da lage Mixin. Vi vil bare nevne vår Mixin .gradient (), som følger:
.gradient (@variables) når (@conditions)
Mixin vil passere en rekke variabler for å angi gradienttypen, fargekombinasjonene, leverandørens prefikser for bakoverkompatibilitet og index, samt forhold å iterere Mixin.
Vi vil angi standardverdier for retningen og leverandørens prefikser. Derfor, med mindre vi vil endre gradientretningen, må vi bare spesifisere type og farger.
Her er en oversikt over verdiene vi trenger:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: lengde (@prefixes)) når (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // stilen går her
Det er verdt å merke seg at de fleste av MINDRE funksjoner som Loop er forankret i Mixins. Så, selv om vi teknisk lager en Loop her, kan vi fortsatt kalle det en Mixin. Grunnen til at vi bruker en Loop er fordi vi må generere flere forekomster av bakgrunn eller bakgrunnsbilde egenskap for å erklære graden, slik som:
bakgrunnsbilde: -webkit-lineær-gradient (90deg, rød, blå); bakgrunnsbilde: -moz-lineær-gradient (90deg, rød, blå); bakgrunnsbilde: -ms-lineær-gradient (90deg, rød, blå); bakgrunnsbilde: -o-lineær-gradient (90deg, rød, blå); bakgrunnsbilde: lineær gradient (0deg, rød, blå);
Dette er den komplette syntaksen for å generere en CSS-gradient, som gir en tilbakebetaling for noen tidligere nettlesere med forhåndsdefinert syntaks.
For å generere alle disse reglene, må vi først hente hvert prefiks som er definert i @prefixes variabel og konverter vinkelverdien som er angitt i @dir. Da danner vi gradientsyntaxen med såkalt Escaping og Interpolation.
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: lengde (@prefixes)) når (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: ekstrakt (@prefixes @ index); @ dir-old: 90 - (@dir); bakgrunnsbilde: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)";
Escaping er nyttig når det gjelder å generere ikke-standardisert CSS-syntaks, eller en vilkårlig streng som kanskje ikke gjenkjennes av LESS. MINDRE vil sende koden nøyaktig som den finner, med det eneste unntaket som er interpolerte variabler. Mindre vil fortsatt erstatte disse med sine respektive verdier.
Til slutt vil vi generere standard syntaks, som må utgis etter alle prefikserte verdier. Dette instruerer støttende nettlesere til å plukke det opp i stedet for den forhåndsdefinerte syntaksen. For å gjøre det, pakker vi standardsyntaxen inn i en Mixin Guard, som følger:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: lengde (@prefixes)) når (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: ekstrakt (@prefixes @ index); @ dir-old: 90 - (@dir); bakgrunnsbilde: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)"; & når (@index = lengde (@prefixes)) bakgrunnsbilde: ~ "@ type -gradient (@ dir, @ colors)";
Vi stiller en betingelse som vil utgjøre syntaksen når index av den nåværende iterasjonen er lik antallet av prefiksetene som er angitt @prefixes. Ettersom løpearteringen starter fra det største antallet og deretter går ned til 0, Standard syntaks vil bli generert sammen med den første prefiks syntaksen som i dette tilfellet er -o-.
Vår gradient Mixin er satt, vi kan bruke den nå!
Som nevnt, er vi bare nødvendig for å angi gradienttype og farger, for eksempel:
.gradient (lineær; # 2BC0E4, # EAECC6);
Legg merke til at hver parameter skal skilles med a ;. Vi bruker et komma for å liste farger og leverandør prefikser.
Hvis du vil tilpasse fargestoppet, kan du skrive:
.gradient (lineær; # 2BC0E4, # EAECC6 30%);
Endre gradientretningen skal gjøres med en vinkelverdi i stedet for søkeordets motpart:
.gradient (lineær; # 2BC0E4, # EAECC6 30%; 180deg);
Følgende er et eksempel der vi lager en radial gradient:
.gradient (sirkel; # 2BC0E4, # EAECC6);
Genererer en repeterende gradient? Ikke noe problem:
.gradient (repeterende-lineær; # 085078, # 2BC0E4 25px, # EAECC6 50px);
I så fall må du kontrollere at du justerer background-size tilsvarende for å se ønsket resultat.
I denne opplæringen har vi opprettet en Mixin for å gjøre CSS-gradientgenerasjonen mer conscise. Vi har også lært om rømmer og interpole langs veien.
I tillegg er vår gradient Mixin et godt eksempel på bruk av Loop. I stedet for å oppgi alle forhåndsdefinerte syntakser på denne måten:
.radial (@direction: 50% 50%, @origin: #fff, @end: # 000) bakgrunnsfarge: # e9b90f; bakgrunnsbilde: -webkit-gradient (radial, @ retning, 0, @ retning, 200, fra (@end), til (@origin)); bakgrunnsbilde: -webkit-radial-gradient (@direction, @origin, @end); bakgrunnsbilde: -moz-radial-gradient (@direction, @origin, @end); bakgrunnsbilde: -O-radial-gradient (@direction, @origin, @end); bakgrunnsbilde: -ms-radial-gradient (@direction, @origin, @end); bakgrunnsbilde: radial-gradient (@direction, @origin, @end);
... vi iterere gjennom en liste over prefikser fra en variabel, og sender ut hver av dem når vi går. Vi kan kombinere flere farger i kombinasjon, samt angi stoppene uten begrensning. Denne Mixin er virkelig ganske fleksibel.
Det eneste som mangler er Internet Explorer proprietære syntaks DXImageTransform.Microsoft.gradient, selv om jeg oppfordrer alle til å se fremtiden og Microsoft Edge i stedet!
Accentsconagua