less - 具有多种条件的守卫/嵌套守卫

Question

我正在尝试制作一个混合来评估参数 typ 和比较值。

假设我有一个 mixin 来为旧浏览器创建一个带有后备的 CSS3 渐变，但是如果没有输入开始和/或结束颜色，则只输出背景颜色。除了检查是否正确输入了所有颜色之外，我还想确保开始颜色或结束颜色都不等于后备颜色。

这就是我想使用标准逻辑编写它的方式，但我不允许将守卫嵌套在一起。

.gradient(@color, @start: 0, @stop: 0) when (iscolor(@color)) and (iscolor(@start)) and (iscolor(@stop)) and not ((@start = @color) and (@stop = @color)) {
    background: @color;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, @start),color-stop(1, @stop));
    additional-browser-specific-prefixes;
}

.gradient(@color, @start: 0, @stop: 0) when (default()) {
    background-color: @color;
}

基本上我想做以下 Javascript 条件: if(iscolor(color) && iscolor(start) && iscolor(end) && (start !== color && end !== color)) .有没有人知道这是否可能？

任何想法将不胜感激。

Answer 1

较少的守卫应该具有与 CSS @media 相同的实现(这可能仅适用于语法？？)。我找不到@media 的示例，它使用您尝试使用的运算符的嵌套类型。所以 CSS @media 不可能，Less 守卫也不可能？

但是，在 http://mdn.beonex.com/en/CSS/Media_queries.html我发现:

The not operator has a very low precedence. For example, the not is evaluated last in the following query:

@media not all and (-moz-windows-compositor) { ... }

This means that the query is evaluated like this:

@media not (all and (-moz-windows-compositor)) { ... }

... rather than like this:

@media (not all) and (-moz-windows-compositor) { ... }

这应该意味着您不必在 not 之后用额外的括号括起您的条件。关键词。以下代码应该可以工作:
.gradient(@color, @start: 0, @stop: 0) when (iscolor(@color)) and (iscolor(@start) and not @start = @color) and (@stop = @color) ，但不幸的是这并没有按预期工作。
如果 Less 守卫的运算符优先级必须等于 CSS @media 的运算符优先级，这可能被认为是一个错误。

更新 我上面的假设是错误的， not关键字将仅应用于整个媒体查询(或保护)，因此 not (a), not (b)毫无意义。另见: https://github.com/less/less.js/issues/2149

如果以上都是事实，请尝试还原条件:

.gradient(@color, @start: 0, @stop: 0)
当(@start = @color)和(@stop = @color)，不是(iscolor(@color))，不是(iscolor(@start))，不是(iscolor(@stop)){
背景色:@color;
}

.gradient(@color, @start: 0, @stop: 0) 
when (@start = @color) and (@stop = @color), (iscolor(@color)=false), (iscolor(@start)=false), (iscolor(@stop)=false) {
    background-color: @color;
}

.gradient(@color, @start: 0, @stop: 0) when (default()) {
    background: @color;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, @start),color-stop(1, @stop));
    additional-browser-specific-prefixes;
}

或尝试使用嵌套的 mixin，如下所示:

default(@a,@b,@c){
property: default;
}
.fallback(@a,@b,@c){
property: fallback;
}

.background(@a,@b,@c) when (@a>0) and (@b>0) and (@c>0)
{
.and(@a,@b,@c) when (@a=@c) and (@b=@c) {
.fallback(@a,@b,@a);
}
.and(@a,@b,@c) when (default()){
.default(@a,@b,@a);
}
.and(@a,@b,@c);
}
.background(@a,@b,@c) when (default())
{
.fallback(@a,@b,@c);
}

test0 { .background(0,1,1); }
test1 { .background(1,1,1); }
test2 { .background(2,1,1); }
test3 { .background(1,2,1); }
test4 { .background(1,1,2); }