css - LESS CSS - 在 mixin 中设置变量

Question

我最近开始使用LESS CSS——它很棒（如果你还没有的话，我建议你去看看）。

我正在做一个项目，我想做以下事情（这不是正确的语法，只是试图解释我的问题）：

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

我知道我可以为此使用 mixins，但是上述方法可以让我不必在每次需要根据@background_color变量更改颜色时都编写 mixins（因为我将使用@secondary_color边框、背景颜色等）。

我一直在努力寻找解决方案，但我没有运气。如果有人对我能做些什么来完成这项工作有任何想法，我很想听听他们的意见。

谢谢！

Answer 1

更新我刚刚重新阅读了您的评论并更好地理解了这个问题。这应该有效：

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

然后使用mixin：

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

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

添加了更紧凑的版本

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