6

I am trying to write a mixin for border-radius than only outputs when the values, set by a variable, are >= 0. I set the base value in a variable as 3px, so if I enter -1 or no for example, the border-radius mixin would not create any properties in the final stylesheet. I can get this to work for if I want to have the same value for every corner. But I can't workout how to get it working if I want to use the shorthand i.e 3px 3px 0 0. I think it is an issue with the 3px being changed by a variable and 0 in both scenarios. My code at the moment is

.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 run the mixin if it contains a certain value or word defined from a global variable. I am doing this for a theme variables file where, based on the branding, companies might want rounded corners or not and I would prefer not to have loads of 0 values unnecessarily included in the final stylesheet.

I would really appreciate any help with this, even if it is just to find out that what I want to do isn't possible within LESS. Thank you

4

2 回答 2

5

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

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

这是LESSand代码（注意警卫中的使用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，它需要额外的属性，但我希望你能明白。

于 2013-04-18T17:45:46.587 回答
4

将“否”视为 0

这个改进的 mixin 将“no”视为0，然后查看是否所有内容都设置为0。我不知道这是否正是您想要的功能，但这就是我在此处提供的功能（请参阅.class14下面的输出，了解它如何与其他有效值一起使用）。

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

为了完全兼容，必须为所有允许的长度/\b0px|\b0%|\b0em/gi类型设置字符串替换（我不打算花时间去做）。

所以这个 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); }

产生这个 CSS 输出（忽略它评估为 net 的所有实例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;
}
于 2013-04-18T18:50:59.987 回答