Definire variabili variabili usando LESS CSS

Diciamo che ho tre schemi di colors separati che vengono utilizzati su varie pagine in un sito. Ogni colore ha una tinta leggera, media e scura definita e la combinazione di colors è definita da una class nel corpo. Supponiamo che lo schema di colors “rosso” sia l’impostazione predefinita. Come questo:

Definizioni di colore :

@red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; 

Esempio di stile di base predefinito

 body { background-color: @red-dk; #container { background-color: @red-md; p { color: @red-dk; } } } 

Esempio di stile per diversi colors

 body.green { background-color: @green-dk; #container { background-color: @green-md; p { color: @green-dk; } } } 

Mi piacerebbe usare le variabili in modo da non dover riscrivere tutte le variazioni di colore per ogni schema, così posso scrivere qualcosa del genere:

 body.[color-var] { background-color: @[color-var]-dk; #container { background-color: @[color-var]-md; p { color: @[color-var]-dk; } } } 

… ma non riesco proprio a capire come ottenerlo. Aiuto…?

Usa l’ interpolazione e l’ escaping , le parentesi nel selettore e i mixins parametrici per ottenere l’effetto desiderato:

  • Variabili dinamiche per interpolazione : in una stringa, "@{variable}" viene sostituito con il valore della variabile. Possono anche essere annidati: dati @{@{var}-foo} e @var: bar; , il risultato è "barfoo" .
    Il valore risultante è quotato. Per rimuovere queste virgolette, prefisso ~ .
  • Selettori dinamici per interpolazione selettore : body.@{var} si trasforma in body.bar .

Esempio:

 @red-md: #232; @red-dk: #343; .setColor(@color) { body.@{color} { background-color: ~"@{@{color}-dk}"; #container { background-color: ~"@{@{color}-md}"; p { color: ~"@{@{color}-md}"; } } } } .setColor(~"red"); // Escape to prevent "red" turning "#FF0000" //.setColor(~"blue"); etc.. 

Diventa:

 body.red { background-color: #334433; } body.red #container { background-color: #223322; } body.red #container p { color: #223322; } 

Nota: quando la risposta è stata originariamente scritta, l’interpolazione del selettore non esisteva. Vedi la revisione precedente per la soluzione se stai lavorando con un vecchio compilatore LESS (prima di LESS 1.3.1a). Il supporto per il vecchio metodo verrà eliminato in LESS 1.4.0.

Se quei valori seguono davvero un formato prevedibile come quello, sembra un caso perfetto per un mixin parametrico :

Di meno:

 @red: #232; @green: #565; @blue: #898; .theme (@color) { background-color: @color - #111; #container { background-color: @color; p { color: @color + #111; } } } body.red { .theme(@red); } 

CSS compilato:

 body.red{background-color:#112211;} body.red #container{background-color:#223322;} body.red #container p{color:#334433;} 

So che questa domanda è abbastanza vecchia, ma per quelli che vengono a questo post la mia risposta forse può aiutare

Non sono veramente sicuro di ciò che vuoi usare, ma uno dei miei suggerimenti è basato sulla risposta di @ScottS. Nel mio mondo reale, ho bisogno di creare un’app web, in cui mostri diversi marchi e ogni marchio abbia il proprio colore, sfondo e così via … quindi ho iniziato a inseguire un modo per realizzare questo in MENO, cosa ho potrebbe facilmente fare su SASS e il risultato è qui sotto:

DI MENO

 // Code from Seven Phase Max // ............................................................ // .for .for(@i, @n) {.-each(@i)} .for(@n) when (isnumber(@n)) {.for(1, @n)} .for(@i, @n) when not (@i = @n) { .for((@i + (@n - @i) / abs(@n - @i)), @n); } // ............................................................ // .for-each .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) {.-each(extract(@array, @i))} // Brands @dodge : "dodge"; @ford : "ford"; @chev : "chev"; // Colors @dodge-color : "#fff"; @ford-color : "#000"; @chev-color : "#ff0"; // Setting variables and escaping than @brands: ~"dodge" ~"ford" ~"chev"; // Define our variable .define(@var) { @brand-color: '@{var}-color'; } // Starting the mixin .color() { // Generating the loop to each brand .for(@brands); .-each(@name) { // After loop happens, it checks what brand is being called .define(@name); // When the brand is found, match the selector and color .brand-@{name} & { color: @@brand-color; } } } .carColor { .color(); } 

Il risultato sarà:

CSS

 .brand-dodge .carColor { color: "#fff"; } .brand-ford .carColor { color: "#000"; } .brand-chev .carColor { color: "#ff0"; } 

Questo è molto complicato e ho dovuto usare diversi elementi per ottenere ciò di cui avevo bisogno, prima ho usato un set di mixin fornito da Seven Phase Max e puoi trovarlo qui e, la risposta di @ScottS era il pezzo che mancava al mio puzzle … spero che questo aiuti te e altri che hanno bisogno di creare un set di Variabili per far parte di un’altra variabile e creare un file meno dinamico.

Puoi copiare il mio intero codice e testare su http://lesstester.com/

Prova questo

 @red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; @color: 'red-lt'; div{ background: @@color; border: 1px solid lighten(@@color,20%); } 

A mia conoscenza, i nomi delle variabili variabili non sono supportati in LESS. Potresti comunque ristrutturare le tue dichiarazioni in maniera più semantica:

 /* declare palette */ @red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; /* declare variables based on palette colors */ @lt: @red-lt; @md: @red-md; @dk: @red-dk; /* ...and only use them for main declarations */ body { background-color: @dk; #container { background-color: @md; p { color: @dk; } } } 

Questo dovrebbe consentire di passare da una palette all’altra in modo abbastanza semplice evitando riferimenti espliciti ai colors.