我有一个带有保护子句的 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;
}
最佳答案
与我之前评论中所说的相反,问题实际上出在 .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);
}
关于css - Less Guard 没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39226254/