较少的border-radius速记mixin,禁用变量

Question

我试图为border-radius编写一个mixin,而不是仅当输出由变量设置的值> = 0.我将变量中的基值设置为3px,所以如果我输入-1或者例如, border-radius mixin不会在最终样式表中创建任何属性.如果我想为每个角落都有相同的价值,我可以让它工作.但是,如果我想使用速记即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.我这样做是为了一个主题变量文件,根据品牌,公司可能想要圆角或者没有,我宁愿不要在最终样式表中不必要地加载0值.

我真的很感激任何帮助,即使只是为了找出我想要做的事情在LESS中是不可能的.谢谢

Answer 1

你可以试试这样的东西,使用多参数混合......并分别用防护装置检查每个参数,我分两步编写了mixin来分别做卫兵

• 对于值的非数字条目(在您的情况下为'no')与isnumber()和
• 为了价值 = 0

这里是LESS代码(注意and守卫中的使用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,它需要额外的属性,但我希望你能得到这个想法.