Guards with multiple conditions/Nested guards - less

Question

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.

Answer 1

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