Göra gradienterna enklare med mindre blandningar

CSS-gradienter har en ganska rotig syntax, som görs ännu värre när du lägger till leverantörs prefix. Så, i den här handledningen kommer vi att göra Gradient-färggenerering mer intuitiv med en MINDRE Mixin.

Vår Mixin kommer att tillgodose tre typer av CSS-gradienter, nämligen linjärradiell, och upprepa. Vi kommer att ha ett par inställningar för att manipulera gradientutgången, inklusive gradienttyp, färgkombination och gradientorientering. 

Här är en demonstration av något vi kan skapa med den resulterande mixin:

Låt oss nu se hur vi bygger den!

CSS Gradient Syntax

Till att börja med undersöker vi den syntax som bildar de tre gradienttyperna, vilket hjälper oss att driva vår Mixin.

// 1. Linjär gradient bakgrundsbild: Linjär gradient (90deg, # ED4264, #FFEDBC); // 2. Radialgradient bakgrundsbild: Radial-gradient (cirkel, # ED4264, #FFEDBC); // 3. Repeterande (linjär) gradient upprepande-linjär gradient (90deg, # ED4264, #FFEDBC); 

Dessa är CSS-gradientsyntaxformerna, enligt W3C-standarden. Leverantörs prefix skulle behöva stödja äldre webbläsare.

Viktig notering:

Tänk på att det finns en motsättning till hur äldre webbläsare (när du använder den prefixade syntaxen) gör linjär gradientorientering.

Det brukade vara så att 90deg (som vi angav för att bilda en linjär gradient) skulle spänna över gradienten från botten till toppen, från och med # ED4264 till #FFEDBC0deg tolkades som från vänster till höger. Den slutliga specifikationen å andra sidan säger att 0deg pekar från botten till toppen, därmed 90deg spänner över lutningen från höger till vänster istället.

Quirks förekommer också med de nyckelordvärden som används för att definiera gradientorienteringen. Tidigare specifikationer använde sökorden toppvänsterhöger och botten, medan den slutliga versionen lägger till till, därav till toppentill vänstertill höger, och till botten.

Följande demo visar två lika byggda gradienter, var och en använder värdena 90deg, # ED4264, #FFEDBC. Den till vänster använder prefix och den till höger använder modern syntax.

Vinkelvärden är mer tillförlitliga för vårt fall. Vi kan enkelt konvertera det gamla vinkelbeteendet, trots avvikelsen, för att uppträda som i den slutliga specifikationen med en enkel subtraktion.

x = 90 - y 

De y är den vinkel vi angav för standardsyntaxen, medan x är värdet att använda i den prefixade syntaxen.

Skapa Mixin

Låt oss då skapa Mixin. Vi heter vår Mixin helt enkelt .lutning(), som följer:

.gradient (@variables) när (@ villkor)  

Mixin kommer att passera ett antal variabler för att ange gradienttyp, färgkombinationer, leverantörs prefix för bakåtkompatibilitet och index, så väl som betingelser att iterera Mixin. 

Vi ställer in standardvärden för riktning och leverantörs prefix. Därför, om vi inte vill ändra gradientriktningen, behöver vi bara ange typ och den färger.

Här är en sammanfattning av de värden vi behöver:

.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: längd (@prefixes)) när (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // stilen går här 

Prefixed Values

Det är värt att notera att de flesta mindre funktioner som Loop är rotade i Mixins. Så, även om vi tekniskt skapar en Loop här, kan vi fortfarande kalla det en Mixin. Anledningen till att vi använder en Loop är att vi måste generera flera instanser av bakgrund eller bakgrundsbild egenskap för att deklarera gradienten, som så:

bakgrundsbild: -webkit-linjär-gradient (90deg, röd, blå); bakgrundsbild: -moz-linjär-gradient (90deg, röd, blå); bakgrundsbild: -ms-linjär-gradient (90deg, röd, blå); bakgrundsbild: -o-linjär-gradient (90deg, röd, blå); bakgrundsbild: linjär gradient (0deg, röd, blå); 

Det här är den fullständiga syntaxen för att generera en CSS-gradient, vilket ger en återgång till vissa tidigare webbläsare med prefixad syntax.

För att generera alla dessa regler måste vi först hämta varje prefix som definieras i @prefixes variabel och konvertera vinkelvärdet som ställts in i @dir. Då bildar vi gradientsyntaxen med så kallad Escaping och Interpolation.

.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: längd (@prefixes)) när (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extrakt (@prefixes @ index); @ dir-old: 90 - (@dir); bakgrundsbild: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)";  

Escaping är användbar när det gäller att generera icke-standard CSS-syntax eller en godtycklig sträng som kanske inte känns igen av LESS. MINDER kommer att mata ut koden exakt som den finner, med det enda undantaget som är interpolerade variabler. MINDER kommer fortfarande att ersätta dessa med sina respektive värden.

Standardsyntax

Slutligen kommer vi att generera standardsyntaxen, som måste utföras efter alla prefixade värden. Detta instruerar stödjande webbläsare att hämta det i stället för den prefixade syntaxen. För att göra det sätter vi in ​​standardsyntaxen inom ett Mixin Guard, enligt följande:

.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: längd (@prefixes)) när (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extrakt (@prefixes @ index); @ dir-old: 90 - (@dir); bakgrundsbild: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)"; & när (@index = längd (@prefixes)) background-image: ~ "@ type -gradient (@ dir, @ colors)";  

Vi ställer in ett villkor som kommer att mata ut syntaxen när index av den aktuella iterationen är lika med antalet prefix som anges @prefixes. När loop-iterationen börjar från det största antalet och sedan går ner till 0, standardsyntaxen kommer att genereras tillsammans med den första prefixade syntaxen som i detta fall är -o-.

Vår gradient Mixin är helt klar, vi kan använda den nu!

Använda Mixin

Som nämnts är vi bara nödvändig för att ange gradienttyp och färger, till exempel:

.gradient (linjär; # 2BC0E4, # EAECC6); 

Observera att varje parameter ska separeras med a ;. Vi använder ett komma för att lista färger och leverantörs prefix.

Om du vill anpassa färgstoppet kan du skriva:

.gradient (linjär; # 2BC0E4, # EAECC6 30%); 

Ändra gradientriktningen bör göras med ett vinkelvärde istället för sökordets motsvarighet:

.gradient (linjär; # 2BC0E4, # EAECC6 30%; 180deg); 

Följande är ett exempel där vi skapar en radiell gradient:

.gradient (cirkel; # 2BC0E4, # EAECC6); 

Genererar en repeterande gradient? Inga problem:

.gradient (upprepande-linjär; # 085078, # 2BC0E4 25px, # EAECC6 50px); 

Kontrollera i så fall att du justerar background-storlek följaktligen för att se önskat resultat.

Slutsats

I denna handledning har vi skapat en Mixin för att göra CSS-gradientgenerationen mer konscis. Vi har också lärt oss om flyr och interpolation längs vägen.

Dessutom är vår gradient Mixin ett bra exempel på att använda Loop. I stället för att lista alla prefixade syntax så här:

.radiell (@riktning: 50% 50%, @origin: #fff, @end: # 000) bakgrundsfärg: # e9b90f; bakgrundsbild: -webkit-gradient (radial, @ riktning, 0, @ riktning, 200, från (@end) till (@origin)); bakgrundsbild: -webkit-radial-gradient (@direction, @origin, @end); bakgrundsbild: -moz-radial-gradient (@direction, @origin, @end); bakgrundsbild: -o-radial-gradient (@direction, @origin, @end); bakgrundsbild: -ms-radial-gradient (@direction, @origin, @end); bakgrundsbild: radial-gradient (@direction, @origin, @end);  

... vi repeterar genom en lista över prefix från en variabel, utmatar var och en av dem när vi går. Vi kan kombinera flera färger i kombination, samt ange stoppen utan begränsning. Denna Mixin är verkligen ganska flexibel.

Den enda sak som saknas är den syntetiska Internet Explorer DXImageTransform.Microsoft.gradient, även om jag uppmuntrar alla att se framtiden och Microsoft Edge istället!

Ytterligare resurser

  • CSS-gradienter är snabbare än SVG-bakgrunder
  • Förstå CSS3 Gradients
  • Förstå MINDER Loop