如何用較少的逗號傳遞參數

Question

我有一個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);
  */
}

Answer 1

注意：我贊同torazaburo的所有評論。 請不要使用Less mixins作為添加前綴的方法。 使用諸如AutoPrefixer或Free 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 */
}

或者，使用如下所示的高級@rest變量選項 。 這是一種將可變數量的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 */
}

Answer 2

解決方法之一是使用臨時變量：

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

當您將變量傳遞到mixin時，也可以轉義該值：

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

這兩個都確保傳遞給mixin的值是一個字符串。