Как передать параметры с запятыми в меньше

Question

У меня есть миксин, который принимает имя фигуры и ее координаты. Мне интересно, как бы я передал свои координаты, если координаты содержат запятые?

.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

Примечание: я повторяю все комментарии, сделанные торазабуро. Пожалуйста, не используйте Less mixins как способ добавления префиксов. Намного проще использовать инструмент префикса, такой как AutoPrefixer или без префикса.

Тем не менее, ниже приведены несколько способов достижения результата, который вы ищете:

.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 Вариант переменной, как показано ниже. Это способ передать переменное число аргументов в миксин и при этом сделать его соответствующим определению миксина.

.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 */
}

С другой стороны, если миксин предназначен только для добавления префиксов поставщиков (которые я не рекомендую, как упоминалось ранее), простейшим вариантом будет следующий:

.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, является строкой.