Pregunta

Lo que quiero hacer es crear un mixin que toma argumentos y utiliza uno o más de los argumentos como nombres para otros mixins a ser incluidos.

ya que no estoy seguro acerca de los términos apropiados, voy a tratar de explicar a través del ejemplo:

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

La imagen funciona, pero aún no he descubierto cómo hacer referencia al color apropiado para @gradients. Es esto posible?

¿Fue útil?

Solución

No creo que había necesidad @gradients variables en absoluto. Basta con definir las variables:

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

Su mixin no debe comenzar con @, que define una variable. Un mixin es básicamente sólo una clase.

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

Sólo como ejemplo I establece los atributos para el mixin a ser el color @dark y 500 para la altura.

A continuación, cuando se desea utilizar su mixin en otra definición que sería de esta manera:

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

Así que estabas en el punto que está utilizando el mixin que cualquiera puede mantener los valores por defecto o pasar unas nuevas (es decir: @light y 150)

Espero que ayude!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top