sont des noms mixins variables en moins possible?

Question

Ce que je veux faire est de créer un mixin qui prend des arguments et utilise un ou plusieurs des arguments que les noms d'autres mixins à inclure.

Je ne suis pas sûr au sujet des termes appropriés, je vais essayer d'expliquer par l'exemple:

@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.
}

L'image fonctionne, mais je n'ai pas encore compris comment référencer la couleur appropriée de @gradients. Est-ce possible?

Answer 1

Je ne pense pas que vous auriez besoin @gradients variable à tous. Il suffit de définir vos variables:

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

Votre mixin ne doit pas commencer par @, qui définit une variable. Un mixin est fondamentalement juste une classe.

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

À titre d'exemple, je fixe les attributs de la mixin être la couleur de @dark et 500 pour la hauteur.

Ensuite, lorsque vous voulez utiliser votre mixin dans une autre définition, il serait comme ceci:

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

Donc au point étiez vous utilisez le mixin vous pouvez conserver les valeurs par défaut ou passer de nouvelles (ex: @light et 150)

L'espoir qui aide!