[英]How to Pass Parameters with Commas in Less
I have a mixin that takes the name of the shape and its coordinates. 我有一个mixin,它带有形状的名称及其坐标。 I am wondering how would I pass in my coordinates if the coordinates contains commas?
我想知道如果坐标包含逗号,如何传递坐标?
.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);
*/
}
Note: I second all comments made by torazaburo.
注意:我赞同torazaburo的所有评论。 Please don't use Less mixins as a way to add prefixes.
请不要使用Less mixins作为添加前缀的方法。 It is much more simpler to use a prefixing tool like AutoPrefixer or Prefix-free.
使用诸如AutoPrefixer或Free Prefix-free之类的前缀工具要简单得多。
That said, below are a few ways in which you can achieve the output that you are looking for: 就是说,以下是实现所需输出的几种方法:
.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 */
}
Or, use the advanced @rest
variable option like below. 或者,使用如下所示的高级
@rest
变量选项 。 This is a way to pass variable number of args to a mixin and still make it match the mixin definition. 这是一种将可变数量的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 */
}
Alternately, if the mixin is only to add vendor prefixes (which I don't recommend as mentioned earlier), the simplest option would be the below: 或者,如果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 */
}
One work around is to use a temporary variable: 解决方法之一是使用临时变量:
.foo {
@workAround: 0 0, 0 100%, 100% 0;
.clip-path(polygon, @workAround);
}
You can also escape the value when you pass the variable into the mixin: 当您将变量传递到mixin时,也可以转义该值:
.foo {
.clip-path(polygon, ~"0 0, 0 100%, 100% 0");
}
These both ensure that the value passed to the mixin is a string. 这两个都确保传递给mixin的值是一个字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.