sono nomi mixin variabili in meno possibile?

Question

Quello che voglio fare è quello di creare un'intermedia che prende argomenti e utilizza uno o più argomenti come nomi per altri mixin da inserire.

come io non sono sicuro circa i termini corretti, cercherò di spiegare con l'esempio:

@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'immagine funziona ma non ho ancora capito come fare riferimento al colore appropriato da @gradients. Questo è possibile a tutti?

Answer 1

Non credo che avresti bisogno @gradients variabile a tutti. Basta definire le variabili:

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

Il mixin non dovrebbe iniziare con @, che definisce una variabile. Un mixin è fondamentalmente solo una classe.

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

A titolo di esempio ho impostato gli attributi per il mixin essere il colore @dark e 500 per l'altezza.

Poi, quando si desidera utilizzare il mixin in un'altra definizione sarebbe in questo modo:

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

Quindi, in corrispondenza del punto stavi utilizza il mixin è possibile mantenere i valori di default o passare nuove (es: @light & 150)

Speranza che aiuta!