sont des noms mixin variables dans 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 comme noms pour d'autres mixins à inclure.

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

Les travaux d'image mais je ne l'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 ayez besoin de la variable @gradients du tout. Définissez simplement 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 définir les attributs pour le 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 si:

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

Donc, au point ont été vous utilisez le mixin vous pouvez conserver les valeurs par défaut ou passer de nouvelles (c'est-à-dire: @light & 150)

Espérons que ça aide!