Mehrere Funktionen in String mit weniger

Ich fragte eine similar question zu diesem vor einer Weile, und erhielt eine gute Antwort. Leider reicht die Antwort diesmal nicht aus und die Frage ist etwas komplexer.Mehrere Funktionen in String mit weniger

Ich verwende LESS mit den LESSHat Mixins, um ein Thema im Moment zu erstellen. Ich habe eine Anzahl von Farben als Variablen definiert und versuche gerade, einen Gradienten mit LESSHats .gradient() Mixin zu definieren. Das Problem ist, dass die mixin eine Zeichenfolge als ein einziges Argument akzeptiert, sondern als eine Reihe von Argumenten für jeden Steigungsparameter, zum Beispiel:

#element { 
    .gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)"); 
}

Alles ist gut und gut mit der oben, und ich kann meine Variablen verwenden innerhalb der Zeichenfolge mit String-Interpolation (z. B. @{color-var}). Allerdings würde Ich mag auch einige Funktionen auf den Variablen ausführen, etwa wie folgt:

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)");

Das Problem ist, dass darken(@green, 10%) nie kompiliert wird, und einige Browser einfach diese Farbe interpretieren als green. Kennt jemand den richtigen Weg, die Rückgabe der darken()-Funktion in die obige Zeichenfolge aufzunehmen, ohne dafür eine separate Variable zu erstellen?

Als Referenz Ich habe folgendes ohne Erfolg versucht: erste

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, "darken(@green, 10%)" 50%, "darken(@green, 10%)" 100%)"); 
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, {darken(@{green}, 10%)} 50%, {darken(@{green}, 10%)} 100%)");

Quelle

2013-04-16 BenM

I „die richtige Art und Weise glauben, dass die Rückkehr des' verdunkeln einschließen() ' Funktion in der Zeichenfolge "ist _not to_ (das heißt, ich glaube nicht, dass weniger Funktionen können _currently_ in einer Zeichenfolge enthalten sein und arbeiten; es gibt keine" Funktionsinterpolation "). – ScottS

Das sollte funktionieren, es ist wie Ihr erster Ansatz, aber Sie sollten auch die ~:

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, " darken(@green, 10%) ~" 50%, " darken(@green, 10%) ~" 100%)");

Quelle

2013-04-16 16:41:00 Lipis

Hmm, das scheint nicht zu funktionieren. Zum Beispiel: '.gradient (~" linear-gradient (oben, @ {grün} 0%, "verdunkeln (@green, 10%) ~" 100%) ");' kompiliert zu 'linear-gradient (top, # 77cc33 0%,, # 5fa329, 100%); bemerken Sie das fehlerhafte Komma ... – BenM

@BenM: Nur ein FYI, muss dies ein Problem mit dem LESSHat Mix selbst sein (etwas, was es mit dem String-Wert tut), als nur aus der Perspektive der Bildung einer Schnur, erscheinen die zusätzlichen Kommas nicht. Ich denke, das ist im Wesentlichen der richtige Weg, um zu bekommen, was Sie wollen (auch wenn es technisch nicht die Funktion in einer Zeichenfolge verwendet). – ScottS

@ScottS danke für Ihre Kommentare. Ich habe das Problem untersucht und es scheint, dass Sie recht haben. Das Problem ist mit dem Mixin von LESSHat, anstatt mit der von Lipis bereitgestellten Lösung. – BenM

Haben Sie versucht, die dunkle Farbe in eine Variable zu speichern? Wie folgt aus:

@darkened-green: darken(@green, 10%); 
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, @{darkened-green} 50%, @{darkened-green} 100%)");

Quelle

2013-04-16 13:47:45

Ja, das klappt natürlich. Bitte beachten Sie jedoch meine separate Notiz in der Frage: * Kennt jemand die korrekte Möglichkeit, die Rückgabe der Funktion verdunkeln() innerhalb der obigen Zeichenfolge **, ohne eine separate Variable ** dafür zu erstellen? * – BenM

Mehrere Funktionen in String mit weniger

Antwort

Verwandte Themen