I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radius mixin should not generate any properties in the stylesheet. I have managed to make it work when setting the same value for each corner, but I am struggling with implementing it for shorthand notation like 3px 3px 0 0. The issue seems to revolve around the variable affecting the 3px value and handling 0 in different scenarios. Here is my current code:
.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); }
// Outputs correctly: 3px 3px 3px 3px
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// Outputs correctly: 3px 3px 0 0
@baseBorderRadius: no; // When changing the variable to disable/ignore the mixin
.class1 { .border-radius(@baseBorderRadius); }
// Works as intended and does not run the mixin
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// ISSUE HERE! Result: no no 0 0
Therefore, I am seeking a solution to prevent the mixin from running based on a specific value or word defined by a global variable. This is part of my theme variables file where companies may want rounded corners depending on branding, and I aim to avoid unnecessary inclusion of 0 values in the final stylesheet.
I would greatly appreciate any assistance with this matter, whether it confirms the feasibility of my objective within LESS or suggests alternative approaches. Thank you.