Multiple Condition Guards / Nested Fences
I am trying to create a mixin that evaluates parameter values ββand parameter comparisons.
Let's 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 the background color is output. In addition to validating that all colors are entered correctly, I want to make sure that neither the start nor the end color is equal to the second color.
This is how I would like to write it using standard logic, but I am not allowed to insert 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;
}
In fact, I want to fulfill the following conditions Javascript is: if(iscolor(color) && iscolor(start) && iscolor(end) && (start !== color && end !== color))
. Does anyone know if this is possible?
Any ideas would be much appreciated.
source to share
Less guards should have the same implementation as CSS @media (maybe this only applies to the syntax ??). I can't find examples for @media that use the nesting type for the statements you are trying to use. So this is not possible for CSS @media, and thus Less guards?
But, at http://mdn.beonex.com/en/CSS/Media_queries.html I found:
The not operator has very low precedence. For example, not evaluated last in the following query:
@media not all and (-moz-windows-compositor) { ... }
This means that the request is evaluated as follows:
@media not (all and (-moz-windows-compositor)) { ... }
... and not like this:
@media (not all) and (-moz-windows-compositor) { ... }
This should mean that you don't need to put extra parentheses in your conditions after the keyword not
. 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 it doesn't work as expected. If the precedence of the operator less than defenders must match the precedence of the CSS @media operator, this may be considered an error.
update . My guess was wrong, the keyword not
will only apply to the entire media query (or guard), so it not (a), not (b)
doesn't make any sense. Also see: https://github.com/less/less.js/issues/2149
If all of the above is true, try returning the conditions: <Hump> .gradient (@color, @start: 0, @stop: 0) when (@start = @color) and (@stop = @color), not (iscolor ( @color)), not (iscolor (@start)), not (iscolor (@stop)) {background-color: @color; } Strike>
.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;
}
or try using nested mixins like this:
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); }
source to share