Question

我正在尝试制作一个mixin来评估参数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 guard也不可能？

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

not运算符的优先级非常低。例如，不是   在以下查询中最后评估：

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

这意味着查询的评估如下：

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

......而不是像这样：

@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 guard的运算符优先级必须等于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））{ background-color：@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;
}

或尝试使用嵌套的mixins，如下所示：

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

有多种条件的守卫/嵌套守卫

1 个答案: