MENO CSS - Impostazione della variabile all'interno di mixin - css, less, less-mixins

Ho recentemente iniziato a usare MENO CSS - E 'fantastico (ti consiglio di controllare se non lo hai ancora).

Sto lavorando a un progetto, dove vorrei fare quanto segue (non è la sintassi corretta, è solo per cercare di spiegare il mio problema):

if(lightness(@background_color) <= 50%)
{
@secondary_color = #fff;
}
else
{
@secondary_color = #000;
}

So che posso usare mixins per questo, ma il metodo sopra mi eviterà di dover scrivere un mixin ogni volta che ho bisogno di cambiare un colore in base al @background_color variabile (poiché userò @secondary_color per bordi, colori di sfondo, ecc.).

Ho cercato di trovare una soluzione, ma non ho avuto fortuna. Se qualcuno ha qualche idea su cosa posso fare per farlo funzionare, mi piacerebbe ascoltarli.

Grazie!

risposte:

AGGIORNARE Ho appena riletto il tuo commento e capisco meglio il problema. Questo dovrebbe funzionare:

.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = color){
color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = background){
background-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = border){
border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = all){
color: black;
background-color: black;
border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = color){
color: white
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = background){
background-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = border){
border-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = all){
color: white;
background-color: white;
border-color: white;
}

Quindi usa il mixin:

.class1 {
.secColor (#fff, color) //should only set the color property for class1
}

.class2 {
.secColor (#000, all) //should set all three properties for class2
}

AGGIUNTA DI PIÙ VERSIONE COMPATTA

.propSwitch (@prop, @clr) when (@prop = color) {
color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = background) {
background-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = border) {
border-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = all) {
color: @clr;
background-color: @clr;
border-color: @clr;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) {
.propSwitch (@prop, #000);
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) {
.propSwitch (@prop, #fff);
}