LESS CSS - 在mixin内设置变量

Question

LESS CSS - 在mixin内设置变量

4

我最近开始使用LESS CSS - 它非常棒（如果你还没有尝试过，我建议你去看看）。

我正在开发一个项目，我想要做以下操作（这不是正确的语法，只是为了尝试解释我的问题）：

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

我知道我可以使用mixin来实现这个目的，但是上述方法可以避免我每次需要根据@background_color变量更改颜色时编写mixin（因为我将在边框、背景颜色等方面使用@secondary_color）。

我一直在尝试寻找解决方案，但是我没有成功。如果有人有任何想法可以让我实现这个目标，我很乐意听取。

谢谢！

- Nicholas LeBlanc

1

请查看模式匹配和守卫表达式部分。 - john

谢谢回复。唯一的问题是我每个“守卫”只能限制一个CSS属性。我将使用@secondary_color来设置边框、字体颜色、背景等等。如果我选择这条路，我需要为每个属性（background-color、color、border-color等）设置一个guard/mixin，因为我不一定会同时设置每个属性（例如，在一个元素上，我只想更改文本颜色，但在另一个元素上，我只想设置边框颜色）。这就是我试图尽可能避免的。 - Nicholas LeBlanc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

更新我刚刚重新阅读了您的评论，更好地理解了问题。以下应该可以解决：

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