Smaller contraction offset of the border of the radius, disable the variable

Question

I'm trying to write mixin for border-radius, and not just outputs when the values ​​given by the variable are> = 0. I set the base value in the variable as 3px, so if I enter -1 or not for example, mix-radius mixin doesn't would create any properties in the final stylesheet. I can make this work if I want to have the same value for each angle. But I can’t train how to make it work if I want to use shorthand ie 3px 3px 0 0. I think this is a problem with replacing 3px with a variable and 0 in both scenarios. My code at the moment

.border-radius(@r) when not (@r = no), (@r = 0) { -webkit-border-radius: @r; -moz-border-radius: @r; border-radius: @r; } .border-radius(@r) when (@r = no), (@r = 0) {} @baseBorderRadius: 3px; .class1 { .border-radius(@baseBorderRadius); } // This outputs fine: 3px 3px 3px 3px .class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); } // This outputs fine 3px 3px 0 0 @baseBorderRadius: no; // If I change the variable to try and disable/not run the mixin .class1 { .border-radius(@baseBorderRadius); } // This does what I want and doesn't run the mixin .class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); } // THIS IS THE PROBLEM! This outputs: no no 0 0 

So, I need a way to disable / not start mixin if it contains a specific value or a word defined from a global variable. I do this for a theme variable file where, based on branding, companies may want rounded corners or not, and I would prefer not to have loads of 0 values ​​that are unnecessarily included in the final stylesheet.

I would really appreciate any help with this, even if you just need to find out that what I want to do is not possible in LESS. thank you

Answer 1

You can try something like this, with several parametric mixes ... and check with protection for each parameter separately, I wrote mixin in two steps to make the guards separately

• for odd record values ​​(in your case, "no") with isnumber() and
• for value = 0

here is the LESS code (note the use of od and on guard):

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

CSS output:

 .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 way out if

 @baseBorderRadius: no; 

because it does not pass the isnumber() test,

or if

 @baseBorderRadius: 0; 

because then all arguments are 0 .

Note. . To perform more complex actions, such as using a slash / with parameters, you need to define a slightly different mixin that accepts additional attributes, but I hope you can get the idea.

Answer 2

Processing no as 0

This updated mixin treats no as 0 , and then looks to see if everything is set to 0 or not. I don’t know if this is exactly what you were looking for, but this is what I presented here (see .class14 Output below, how it works with other valid values).

 .border-radius(@r) { .check-no(@r) { @rad: `'@{r}'.replace(/no/gi, 0).replace(/\b0px|\b0%|\b0em/gi, 0).replace(/[,\[\]]/g, '')`; } .check-no(@r); .set-radius(@rad) when not (@rad = "0") and not (@rad = "0 0") and not (@rad = "0 0 0") and not (@rad = "0 0 0 0") { @finalRad: e(@rad); -webkit-border-radius: @finalRad; -moz-border-radius: @finalRad; border-radius: @finalRad; } .set-radius(@rad) {} .set-radius(@rad); } 

To be fully compatible, replacing the string /\b0px|\b0%|\b0em/gi should be configured for all types of lengths allowed (I was not going to take the time to do this).

So this test code is LESS:

 @b1: 3px; .class1 { .border-radius(@b1); } .class2 { .border-radius(@b1 @b1 0 0); } .class3 { .border-radius(0 0); } .class4 { .border-radius(0px 0); } .class5 { .border-radius(0% 0); } .class6 { .border-radius(0em 0); } .class7 { .border-radius(10px 0); } .class8 { .border-radius(10% 0); } .class9 { .border-radius(10em 0); } .class10 { .border-radius(no); } .class11 { .border-radius(no no); } .class12 { .border-radius(no no 0); } .class13 { .border-radius(no no 0 0); } .class14 { .border-radius(no no 5px 5px); } 

Produces this CSS output (ignoring all instances where it evaluates network 0 ):

 .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; } .class7 { -webkit-border-radius: 10px 0; -moz-border-radius: 10px 0; border-radius: 10px 0; } .class8 { -webkit-border-radius: 10% 0; -moz-border-radius: 10% 0; border-radius: 10% 0; } .class9 { -webkit-border-radius: 10em 0; -moz-border-radius: 10em 0; border-radius: 10em 0; } .class14 { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }