如何用Less中的逗号传递参数

时间:2016-03-07 04:18:25

标签: css less less-mixins

我有一个mixin,它取名形状及其坐标。我想知道如果坐标包含逗号,我将如何传递坐标?

.clip-path(@shape @coords) {
    -webkit-clip-path: @shape(@coords);
       -moz-clip-path: @shape(@coords);
            clip-path: @shape(@coords);
}

.foo {
  .clip-path(polygon, 0 0, 0 100%, 100% 0);

  /*
     I am trying to achieve:
     clip-path: polygon(0 0, 0 100%, 100% 0);
  */
}

2 个答案:

答案 0 :(得分:2)

  

注意:我是第二次所有由torazaburo发表的评论。请不要使用Less mixins作为添加前缀的方法。使用像AutoPrefixer或Prefix-free这样的前缀工具要简单得多。

也就是说,下面是一些可以实现您正在寻找的输出的方法:

.clip-path(@shape, @coords) {
  -webkit-clip-path: ~"@{shape}(@{coords})";
  -moz-clip-path: ~"@{shape}(@{coords})";
  clip-path: ~"@{shape}(@{coords})"; /* use interpolation to display the output */
}

.foo {
  .clip-path(polygon, ~"0 0, 0 100%, 100% 0"); /* pass the values as one single string */
}

或者,使用下面的advanced @rest variable option。这是一种将可变数量的args传递给mixin并使其与mixin定义匹配的方法。

.clip-path(@shape; @coords...) {
  -webkit-clip-path: ~"@{shape}(@{coords})";
  -moz-clip-path: ~"@{shape}(@{coords})";
  clip-path: ~"@{shape}(@{coords})";
}

.foo {
  .clip-path(polygon; 0 0, 0 100%, 100% 0);
}
.foo2 {
  .clip-path(polygon; 0 0, 0 100%, 100% 0, 100% 100%); /* Less compiler will pick all values after the first as coords */
}

或者,如果mixin只是添加供应商前缀(我不建议如前所述),最简单的选项如下:

.clip-path(@args) {
  -webkit-clip-path: @args;
  -moz-clip-path: @args;
  clip-path: @args;
}

.foo {
  .clip-path(~"polygon(0 0, 0 100%, 100% 0)"); /* just pass the whole thing as a string */
}

答案 1 :(得分:1)

一种解决方法是使用临时变量:

.foo {
  @workAround: 0 0, 0 100%, 100% 0;
  .clip-path(polygon, @workAround);
}

将变量传递给mixin时,也可以转义值:

.foo {
  .clip-path(polygon, ~"0 0, 0 100%, 100% 0");
}

这两个都确保传递给mixin的值是一个字符串。