sind variabel mixin Namen in LESS möglich?

Question

Was ich tun möchte, ist eine mixin zu erstellen, die Argumente übernimmt und verwendet eine oder mehrere der Argumente als Namen für andere Mixins aufgenommen werden.

, da ich nicht sicher über die richtigen Begriffe bin, ich werde versuchen, durch Beispiel zu erklären:

@gradients{
    light:#fafafa; //Should these also be prefixed with @?
    dark:#888888;
}
@gradientBackground(@name,@height){
    background-image:url('../img/gradients/{@name}-{@height}.png'); //this works
    background-color:@gradients[@name];
}

.someBox{
    @gradientBackground(light;150);
}

//Expected result:
.someBox{
    background-image:url('../img/gradients/light-150.png'); //This works
    background-color:#fafafa; //This doesn't work.
}

Das Bild funktioniert, aber ich habe noch nicht herausgefunden, wie die entsprechende Farbe aus @gradients zu verweisen. Ist das möglich?

Answer 1

Ich glaube nicht, Sie @gradients Variable überhaupt brauchen würde. Gerade definieren Sie Ihre Variablen:

@light:#fafafa;
@dark:#888888;

Ihre mixin sollte nicht beginnen mit @, dass eine Variable definiert. Ein mixin ist im Grunde nur eine Klasse.

.gradientBackground(@name:@dark, @height:500){
    background-image:url('../img/gradients/{@name}-{@height}.png');
    background-color:@name;
}

Nur als Beispiel stelle ich die Attribute für die mixin die @dark Farbe und 500 für die Höhe sein.

Dann, wenn Sie Ihre mixin in eine andere Definition verwenden möchten wäre es etwa so:

.somebox {
    .gradientBackground(@light, 150);
}

So an dem Punkt waren Sie die mixin verwenden, können Sie entweder die Standardwerte halten oder neue zu übergeben (dh: @light & 150)

Ich hoffe, das hilft!