我正在尝试制作一个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)) 。 如果有可能，有没有人有任何线索？
任何想法将不胜感激。
I am trying to make a mixin which evaluates both the parameters typ and compare values.
Say I have a mixin to create a CSS3 gradient with fallbacks for older browsers but if no start and/or end color is entered only output the background-color. In addition to checking all colors are being entered correctly I want to make sure that neither the start or end color is equal to the fallback color.
This is how I would like to write it using standard logic but I am not allowed to nest the guards together.
.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; }Essentially I want to do the following Javascript condition: if(iscolor(color) && iscolor(start) && iscolor(end) && (start !== color && end !== color)). Does anyone have any clue if this is possible?
Any ideas would be greatly appreciated.
最满意答案
较少的防护应该具有与CSS @media相同的实现（这可能只适用于语法??）。 我找不到@media的例子，它使用了你尝试使用的运算符的嵌套类型。 所以CSS @media是不可能的，所以对于Less guard来说也是不可能的？
但是，在http://mdn.beonex.com/en/CSS/Media_queries.html上我发现：
not运算符的优先级非常低。 例如，在以下查询中最后评估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的运算符优先级，则可以认为这可能是一个bug。
更新我的上述假设是错误的， 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）），not（iscolor（@start）），not（iscolor（@stop））{background-color：@color;
}
或者尝试使用嵌套的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); }Less guards should have the same implementation as CSS @media (this maybe only apply for the syntax??). I can not find examples for the @media, which use the kind of nesting for operators you try to use. So it is not possible for CSS @media and so also not possible for Less guards?
But, on http://mdn.beonex.com/en/CSS/Media_queries.html i found:
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) { ... }
This should mean that you do not have to wrap in extra parentheses your conditions after the not keyword. The following code should work:
.gradient(@color, @start: 0, @stop: 0) when (iscolor(@color)) and (iscolor(@start) and not @start = @color) and (@stop = @color), but unfortunately this does not works as expected. If the operator precedence of Less guards have to equal to the operator precedence of the CSS @media, this could be considered as a bug maybe.
update My above assumption was wrong, the not keyword will be applied on the whole media query (or guard) only, so not (a), not (b) make no sense at all. Also see: https://github.com/less/less.js/issues/2149
If all the above is truth, try to revert the conditions:
.gradient(@color, @start: 0, @stop: 0) when (@start = @color) and (@stop = @color), not (iscolor(@color)), not (iscolor(@start)), not (iscolor(@stop)) { background-color: @color; }
or try to use nested mixins as follows:
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); }更多推荐
发布评论