You could try something like this, with multi-parametric mixins ... and check with the guards for each parameter separately, I wrote the mixin in two steps to do the guards separately
- for values nonnumeric entries (in your case 'no') with
isnumber()
and - for value
= 0
here is the LESS code (note the use od and
in the guards):
.border-r-not-0 (@a, @b, @c, @d) when not (@a = 0), not (@b = 0), not (@c = 0), not (@d = 0){
-webkit-border-radius: @a @b @c @d;
-moz-border-radius: @a @b @c @d;
border-radius: @a @b @c @d;
}
.border-radius(@a, @b, @c, @d) when (isnumber(@a)) and (isnumber(@b)) and (isnumber(@c)) and (isnumber(@d)){
.border-r-not-0(@a, @b, @c, @d);
}
.border-radius(@r) when (isnumber(@r)) and not (@r = 0) {
-webkit-border-radius: @r;
-moz-border-radius: @r;
border-radius: @r;
}
now for
@baseBorderRadius: 3px;
.class1 { .border-radius(@baseBorderRadius); }
.class2 { .border-radius(@baseBorderRadius, @baseBorderRadius, 0, 0); }
the CSS output is:
.class1 {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.class2 {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
and there is no output if
@baseBorderRadius: no;
because it does not pass the isnumber()
test,
or if
@baseBorderRadius: 0;
because then all arguments equal 0
.
Note: For doing more complex stuff, like using the slash /
with the parameters, you have to define a slightly different mixin, that takes additional atributes, but I hope you can get the idea.