variables - Less border-radius shorthand mixin，禁用变量

Question

我正在尝试为 border-radius 编写一个 mixin，而不是仅在变量设置的值 >= 0 时才输出。我将变量中的基值设置为 3px，所以如果我输入 -1 或不输入例如，border-radius mixin 不会在最终样式表中创建任何属性。如果我想在每个 Angular 落都具有相同的值(value)，我可以让它发挥作用。但是如果我想使用速记，即 3px 3px 0 0，我无法锻炼如何让它工作。我认为这是一个问题，在这两种情况下 3px 被变量和 0 改变。我现在的代码是

.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

所以我需要一种方法来禁用/不运行 mixin，如果它包含从全局变量定义的特定值或单词。我正在为一个主题变量文件执行此操作，根据品牌，公司可能需要或不需要圆 Angular ，我不希望在最终样式表中包含不必要的 0 值负载。

我真的很感激任何帮助，即使只是发现我想做的事情在 LESS 中是不可能的。谢谢

Answer 1

你可以尝试这样的事情，使用多参数混入......并分别检查每个参数的守卫，我分两步编写混入以分别执行守卫

• 使用 isnumber() 和
为值非数字条目(在您的情况下为“否”)
• 对于值 = 0

这里是 LESS 代码(注意在守卫中使用 od 和 ):

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

现在

@baseBorderRadius: 3px;
.class1 { .border-radius(@baseBorderRadius); }
.class2 { .border-radius(@baseBorderRadius, @baseBorderRadius, 0, 0); }

CSS 输出是:

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

没有输出如果

@baseBorderRadius: no;

因为没有通过isnumber()测试，

或者如果

@baseBorderRadius: 0;

因为所有参数都等于 0。

注意:为了做更复杂的事情，比如在参数中使用斜杠 /，你必须定义一个稍微不同的 mixin，它需要额外的属性，但我希望你能明白这一点。