较少mixin - 没有引号的输出值

时间:2013-10-27 04:26:41

标签: css css3 less

我正在尝试为CSS转换编写一个带有多个输入参数值的LESS mixin。输入值是要完成的转换类型以及与转换关联的值。

例如,考虑下面给出的代码:

.transform(@type; @value){
}

如果我将输入设为type='rotateY'value='360deg',则输出应为transform: rotateY(360deg)。我已经尝试了以下选项,但它们似乎都没有工作(输出被称为注释)。

transform: "@{type}(@{value})"; /* Output: "rotateY(360deg)" */
transform: @{type}(@{value}); /* Output: Compiler error */
transform: @type(@value); /* Output: rotateY 360deg */

我应该如何编码以获得所需的输出?请帮忙。

注意:mixin代码还有很多其他项目,我只发布了需要修复的行。

1 个答案:

答案 0 :(得分:12)

使用~转义字符串,如下所示。这样做可以确保引号不会打印在输出CSS中。

输入代码:

transform: ~"@{type}(@{value})";

transform: e("@{type}(@{value})");

Mixin致电:

.transform(rotateY;360deg);

输出CSS:

transform: rotateY(360deg);