Share
CSS-Farbverläufe haben eine ziemlich unordentliche Syntax, die sich noch verschlechtert, wenn Sie Herstellerpräfixe hinzufügen. In diesem Tutorial machen wir also die Erzeugung von Farbverläufen mit einem WENIGEREN Mixin intuitiver.
Unser Mixin bietet drei Arten von CSS-Gradienten an, nämlich linear, radial, und wiederholen. Wir haben einige Einstellungen, um die Verlaufsausgabe zu verändern, einschließlich des Verlaufstyps, der Farbkombination und der Verlaufsausrichtung.
Hier ist eine Demo von etwas, das wir mit dem resultierenden Mixin erstellen können:
Nun wollen wir sehen, wie wir es bauen!
Zunächst untersuchen wir die Syntax der drei Gradiententypen und helfen uns schließlich, unser Mixin zu steuern.
// 1. Hintergrund mit linearem Farbverlauf: linearer Farbverlauf (90 Grad, # ED4264, #FFEDBC); // 2. Hintergrundbild des radialen Verlaufs: radialer Verlauf (Kreis, # ED4264, #FFEDBC); // 3. sich wiederholender (linearer) Gradient sich wiederholender linearer Gradient (90 Grad, # ED4264, #FFEDBC);
Dies sind die CSS-Gradientensyntaxformen gemäß W3C-Standard. Zur Unterstützung älterer Browser sind Herstellerpräfixe erforderlich.
Beachten Sie, dass es eine Diskrepanz gibt, wie ältere Browser (bei Verwendung der vorangestellten Syntax) die Ausrichtung des linearen Verlaufs rendern.
Früher war es so, dass die 90 Grad (den wir angegeben haben, um einen linearen Farbverlauf zu bilden) würde den Farbverlauf von unten nach oben überspannen, beginnend mit dem # ED4264 zu #FFEDBC. 0 Grad wurde als von links nach rechts interpretiert. In der endgültigen Spezifikation heißt es dagegen 0 Grad zeigt von unten nach oben, daher 90 Grad erstreckt sich stattdessen von rechts nach links.
Macken treten auch bei den Schlüsselwortwerten auf, die zur Definition der Gradientenausrichtung verwendet werden. Frühere Angaben verwendeten die Schlüsselwörter oben, links, Recht und Unterseite, Die endgültige Version fügt hinzu zu, daher nach oben, nach links, nach rechts, und nach unten.
Die folgende Demo zeigt zwei gleich aufgebaute Gradienten, die jeweils die Werte verwenden 90 Grad, # ED4264, #FFEDBC. Der Linke verwendet Präfixe und der Linke verwendet moderne Syntax.
Winkelwerte sind für unseren Fall zuverlässiger. Das alte Winkelverhalten kann trotz der Diskrepanz leicht konvertiert werden, um sich mit einer einfachen Subtraktion wie in der endgültigen Spezifikation zu verhalten.
x = 90 - y
Das y ist der Winkel, den wir für die Standardsyntax angegeben haben, während der x ist der Wert, der in der vorangestellten Syntax verwendet werden soll.
Dann lassen Sie uns das Mixin erstellen. Wir nennen unser Mixin einfach .Gradient(), wie folgt:
.Farbverlauf (@Variablen) Wenn (@Bedingungen)
Das Mixin übergibt eine Reihe von Variablen, um den Verlaufstyp, die Farbkombinationen, die Herstellerpräfixe für die Abwärtskompatibilität und die Option anzugeben Index, ebenso wie Bedingungen das Mixin durchlaufen.
Wir werden Standardwerte für die Richtung und die Herstellerpräfixe festlegen. Wenn wir also nicht die Richtung des Verlaufs ändern wollen, müssen wir nur die angeben Art und das Farben.
Hier sind die Werte, die wir brauchen:
.Farbverlauf (@type; @colors; @dir: 0deg; @prefixes: Webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // Stil geht hier hin
Es ist erwähnenswert, dass die meisten LESS-Funktionen wie Loop in Mixins verwurzelt sind. Obwohl wir hier technisch eine Loop erstellen, können wir sie immer noch als Mixin bezeichnen. Der Grund, warum wir eine Schleife verwenden, liegt darin, dass wir mehrere Instanzen des erzeugen müssen Hintergrund oder Hintergrundbild Eigenschaft zum Deklarieren des Verlaufs wie folgt:
Hintergrundbild: -webkit-linearer Gradient (90 Grad, Rot, Blau); Hintergrundbild: -moz-linearer Gradient (90 Grad, Rot, Blau); Hintergrundbild: -ms-linearer Gradient (90 Grad, Rot, Blau); Hintergrundbild: -o-linearer Gradient (90 Grad, Rot, Blau); Hintergrundbild: linearer Gradient (0 Grad, Rot, Blau);
Dies ist die vollständige Syntax, um einen CSS-Gradienten zu generieren, und bietet für einige frühere Browser einen Fallback mit vorangestellter Syntax.
Um alle diese Regeln zu generieren, müssen wir zunächst jedes in der @präfixe Variable und konvertieren Sie den Winkelwert, der in eingestellt ist @dir. Dann bilden wir die Gradientensyntax mit sogenannten Escaping und Interpolation.
.Farbverlauf (@type; @colors; @dir: 0deg; @prefixes: Webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extrahieren (@prefixes, @index); @ dir-old: 90 - (@dir); Hintergrundbild: ~ "- @ Präfix - @ Typ - Gradient (@ Alt), @ Farben)";
Das Escaping ist hilfreich, wenn Sie nicht standardmäßige CSS-Syntax oder eine beliebige Zeichenfolge generieren möchten, die von LESS möglicherweise nicht erkannt wird. LESS gibt den Code genau so aus, wie er es findet, mit der einzigen Ausnahme sind interpolierte Variablen. LESS wird diese immer noch durch ihre jeweiligen Werte ersetzen.
Als letztes generieren wir die Standardsyntax, die ausgegeben werden muss nach dem alle vorangestellten Werte. Dadurch werden unterstützende Browser angewiesen, sie anstelle der vorangestellten Syntax abzurufen. Dazu wickeln wir die Standardsyntax wie folgt in einen Mixin Guard ein:
.Farbverlauf (@type; @colors; @dir: 0deg; @prefixes: Webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extrahieren (@prefixes, @index); @ dir-old: 90 - (@dir); Hintergrundbild: ~ "- @ Präfix - @ Typ - Gradient (@ Alt), @ Farben)"; & when (@index = length (@prefixes)) Hintergrundbild: ~ "@ type -gradient (@ dir, @ colors)";
Wir setzen eine Bedingung, die die Syntax ausgeben wird, wenn die Index der aktuellen Iteration ist gleich der Anzahl der in @präfixe. Da die Schleifen-Iteration von der größten Zahl ausgeht und dann nach unten geht 0, Die Standardsyntax wird zusammen mit der ersten vorangestellten Syntax generiert. Dies ist in diesem Fall -O-.
Unser Gradienten-Mixin ist eingestellt, wir können es jetzt verwenden!
Wie gesagt, wir sind nur da erforderlich um den Verlaufstyp und die Farben anzugeben, zum Beispiel:
.Gradient (linear; # 2BC0E4, # EAECC6);
Beachten Sie, dass jeder Parameter mit a getrennt werden sollte ;. Wir verwenden ein Komma, um Farben und Herstellerpräfixe aufzulisten.
Wenn Sie den Farbanschlag anpassen möchten, können Sie schreiben:
.Gradient (linear; # 2BC0E4, # EAECC6 30%);
Die Änderung der Steigungsrichtung sollte mit einem Winkelwert anstelle des Schlüsselwortgegenstands erfolgen:
.Gradient (linear; # 2BC0E4, # EAECC6 30%; 180 Grad);
Das folgende ist ein Beispiel, in dem wir einen radialen Gradienten erstellen:
.Gradient (Kreis; # 2BC0E4, # EAECC6);
Erzeugen eines sich wiederholenden Farbverlaufs? Kein Problem:
.Gradient (sich wiederholend linear; # 085078, # 2BC0E4 25px, # EAECC6 50px);
Stellen Sie in diesem Fall sicher, dass Sie die Einstellung vornehmen Hintergrundgröße entsprechend das gewünschte Ergebnis sehen.
In diesem Lernprogramm haben wir ein Mixin erstellt, um die Generierung von CSS-Gradienten zu verbessern. Wir haben auch darüber erfahren Flucht und Interpolation nach dem Weg.
Darüber hinaus ist unser Gradienten-Mixin ein gutes Beispiel für die Verwendung von Loop. Anstatt alle vorangestellten Syntax auf diese Weise aufzulisten:
.radial (@direction: 50% 50%, @origin: #fff, @end: # 000) Hintergrundfarbe: # e9b90f; Hintergrundbild: -Webkit-Gradient (radial, @ Richtung, 0, @ Richtung, 200, von (@end), bis (@origin)); Hintergrundbild: -webkit-radialer Gradient (@direction, @origin, @end); Hintergrundbild: -moz-radialer Gradient (@direction, @origin, @end); Hintergrundbild: -o-radialer Gradient (@direction, @origin, @end); Hintergrundbild: -ms-radialer Gradient (@direction, @origin, @end); Hintergrundbild: radialer Gradient (@direction, @origin, @end);
… Wir durchlaufen eine Liste von Präfixen aus einer Variablen und geben jedes von ihnen aus. Wir können mehrere Farben kombinieren und die Stopps ohne Einschränkungen festlegen. Dieses Mixin ist wirklich sehr flexibel.
Das einzige fehlende Stück ist die proprietäre Internet Explorer-Syntax DXImageTransform.Microsoft.gradient, Ich würde jedoch alle dazu ermutigen, stattdessen auf die Zukunft und Microsoft Edge zu schauen!
Accentsconagua