Dynamische Variablennamen in LESS CSS

Question

Ich habe das schon eine Weile versucht, andere Antworten zu suchen, aber ohne Erfolg. Hoffentlich kann mir jemand helfen.

Ich versuche, einige dynamische Variablennamen innerhalb eines Mixins zu generieren.

Die Variablen sind bereits definiert:

@horizontal-default-color: #fff; 
@horizontal-inverse-color: #000; 

etc ..

Die mixin ich so etwas wie dies würde sein wollen:

.horizontal-variant(@variant) { 
    color: @{horizontal-@{@variant}-color} 
} 

Und das Ergebnis ich erwarte, wenn sie aufgerufen :

.horizontal-default{ 
    .horizontal-variant(~"default"); 
} 
.horizontal-inverse{ 
    .horizontal-variant(~"inverse"); 
} 

ist

.horizontal-default {color: #fff} 
.horizontal-inverse {color: #000} 

Leider laufe ich jedes Mal in Fehler.

Ich weiß, dass dies getan werden kann, ich habe gesehen, dass es in Schriftart Awesome LESS verwendet wird, wo @{fa-css-prefix} in Variablen definiert ist. Ich habe nur Probleme beim Transport der gleichen Lösung in meinem Projekt.

können Sie versuchen, den Code an http://lesstester.com/

Answer 1

Sie testen Variable Names verwenden können. Und ich habe den Code unter http://lesstester.com/ getestet, es funktioniert.

@horizontal-default-color: #fff; 
@horizontal-inverse-color: #000; 

.horizontal-variant(@variant) { 
    @color: "horizontal-@{variant}-color"; 
    color: @@color; 
} 

.horizontal-default{ 
    .horizontal-variant(~"default"); 
} 
.horizontal-inverse{ 
    .horizontal-variant(~"inverse"); 
}