Più funzioni all'interno della stringa con LESS

Ho chiesto a un similar question di farlo un po 'di tempo fa e ho ricevuto un'ottima risposta. Sfortunatamente, questa volta la risposta non è sufficiente e la domanda è leggermente più complessa.Più funzioni all'interno della stringa con LESS

Sto usando LESS con i mixin LESSHat per creare un tema al momento. Ho definito un numero di colori come variabili e sto attualmente cercando di definire un gradiente utilizzando il mixin di LESSHat .gradient(). Il problema è che il mixin accetta una stringa come un unico argomento, piuttosto che una serie di argomenti per ogni parametro di pendenza, ad esempio:

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

Tutto è bene e buono con quanto sopra, e posso usare le mie variabili all'interno della stringa utilizzando String Interpolation (ovvero @{color-var}). Tuttavia, vorrei anche per eseguire alcune funzioni sulle variabili, qualcosa di simile:

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

Il problema è che non è mai darken(@green, 10%) compilato, e alcuni browser semplicemente interpretare questo colore come green. Qualcuno conosce il modo corretto per includere il ritorno della funzione darken() all'interno della stringa sopra, senza creare una variabile separata per quello?

Per avere un riferimento, ho provato quanto segue senza alcun risultato:

.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%)");

fonte

2013-04-16 BenM

Credo che "il modo corretto per includere il ritorno del' scurire() ' funzione all'interno della stringa "is _not to_ (cioè, non credo che le funzioni LESS possano _currently_ essere incluse in una stringa e funzionare, non c'è" interpolazione della funzione "). – ScottS

Questo dovrebbe funzionare, è come il tuo primo approccio, ma si dovrebbe anche includere il ~:

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

fonte

2013-04-16 16:41:00 Lipis

Hmm, questo non sembra funzionare. Ad esempio: '.gradient (~" linear-gradient (top, @ {green} 0%, "darken (@green, 10%) ~" 100%) ");' compila a 'linear-gradient (top, # 77cc33 0%,, # 5fa329, 100%); 'nota la virgola errata ... – BenM

@BenM: Solo una FYI, questo deve essere un problema con il mixin LESSHat stesso (qualcosa che fa con il valore stringa), come solo puramente dal punto di vista della formazione di una stringa, le virgole extra non vengono visualizzate. Penso che questo sia essenzialmente il modo corretto per ottenere quello che vuoi (anche se non sta tecnicamente usando la funzione in una stringa). – ScottS

@ScottS, grazie per i vostri commenti. Ho studiato il problema e sembra che tu abbia ragione. Il problema è con il mixin di LESSHat, piuttosto che con la soluzione fornita da Lipis. – BenM

Hai provato salvare il colore oscurato in una variabile prima? Come questo:

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

fonte

2013-04-16 13:47:45

Sì, funziona ovviamente. Per favore vedi la mia nota separata nella domanda, però: * Qualcuno sa il modo corretto per includere il ritorno della funzione darken() all'interno della stringa sopra, ** senza creare una variabile separata ** per quello? * – BenM

Più funzioni all'interno della stringa con LESS

risposta

Problemi correlati