LESS CSS - setting variable in mixin

Question

I recently started using LESS CSS - it's awesome (I recommend that you check it out if you haven't already).

I am working on a project where I would like to do the following (this is not the correct syntax, it is only to try to explain my problem):

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

I know that I can use mixins for this, but this method saved me from having to write mixins every time I need to change the color based on the @background_color variable (since I will use @secondary_color for border, background color, etc. )

I tried to find a solution, but I had no luck. If anyone knows what I can do to make this work, I would love to hear them.

Thanks!

Answer 1

UPDATE I am just re-reading your comment and better understanding the problem. This should work:

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

Then use mixin:

 .class1 { .secColor (#fff, color) //should only set the color property for class1 } .class2 { .secColor (#000, all) //should set all three properties for class2 } 

ADDED ADDITIONAL VERSION

 .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); }