css - Less Guard 没有按预期工作

Question

我有一个带有保护子句的 mixin。

我已遵循指南并相信以下语法是正确的。

本质上，该指南应确保@palette 是一系列自定义颜色中的一种，而@color 是一组中的数字。

这有效 - 它编译并产生正确的输出。

但是，如果我更改 @palette 变量导致错误，Less 不会编译 - 这是预期的行为吗？

.AccentPalette(@palette; @color:500) when
    (@palette = amber), (@palette = blue), (@palette = blueGrey), (@palette = cyan), (@palette = deepOrange),
    (@palette = deepPurple), (@palette = green), (@palette = grey), (@palette = indigo), (@palette = lightBlue),
    (@palette = lightGreen), (@palette = lime), (@palette = orange), (@palette = pink), (@palette = purple),
    (@palette = red), (@palette = teal), (@palette = yellow) and
    (@color = 50), (@color = 100), (@color = 200), (@color = 300), (@color = 400),
    (@color = 500), (@color = 600), (@color = 700), (@color = 800), (@color = 900) {
    .Swatch(@palette); 

    @accentColor:"@{@{color}}";

    @accent50:  @50; 
    @accent100: @100; 
    @accent200: @200; 
    @accent300: @300; 
    @accent400: @400; 
    @accent500: @500; 
    @accent600: @600; 
    @accent700: @700; 
    @accent800: @800; 
    @accent900: @900;
}

这样调用:

.AccentPalette(indigo);

一个色板示例 - 有很多，每种颜色一个。

.Swatch(amber)
{
    @50: #fff8e1;
    @100:#ffecb3;
    @200:#ffe082;
    @300:#ffd54f;
    @400:#ffca28;
    @500:#ffc107;
    @600:#ffb300;
    @700:#ffa000;
    @800:#ff8f00;
    @900:#ff6f00;
}

Answer 1

与我之前评论中所说的相反，问题实际上出在 .AccentPalette mixin guard 上。似乎 Less 编译器在 、(或)之前评估了 和 。因此，当您不为 @color 变量提供任何值时，守卫总是会匹配，因为守卫 @color = 500 始终为真。

考虑下面的简化示例:

@500: dummy;
.AccentPalette(@palette; @color:500) when
(@palette = amber), (@palette = blue) and
(@color = 50), (@color = 500), (@color = 900) {
  .Swatch(@palette); 
  accentColor:"@{@{color}}";
}

.Swatch(amber){}
.Swatch(blue){}

#demo {
  .AccentPalette(amber;1000);
}

编译器似乎按如下方式评估它:(注意额外的一对大括号)

(@palette = amber), ((@palette = blue) and (@color = 50)), (@color = 500), (@color = 900)

计算结果为 (false, (false and false), true, false) 或 (false, false, true, false)，因此 mixin 始终匹配因为有一个 true。

---

正确的解决方法应该是像下面这样编写 mixin 守卫:

((@palette = amber),(@palette = blue)) 和 ((@color = 50),(@color = 500),(@color = 900))

但是 Less 编译器似乎不喜欢这对额外的大括号并给出编译器错误。因此，唯一的选择似乎是将守卫分成两个级别，如下例所示。

@500: dummy;

.AccentPalette(@palette; @color:500) when (@palette = amber), (@palette = blue) {
  & when (@color = 50), (@color = 500), (@color = 900) {
    .Swatch(@palette); 
    accentColor:"@{@{color}}";
  }
}

.Swatch(amber){}
.Swatch(blue){}

#demo {
  .AccentPalette(red);
}