LESS mixin - 不带引号的输出值 [英] LESS mixin - Output values without quotes

问题描述

我试图用CSS变换的多个输入参数值写一个LESS mixin。输入值是要完成的转换类型和与转换关联的值。

I am trying to write a LESS mixin with multiple input parameter values for CSS transforms. The input values are the type of transformation to be done and the value associated with the transformation.

例如，考虑下面给出的代码：

For example, consider the code given below:

.transform(@type; @value){
}

如果我输入 type ='rotateY'和 value ='360deg'，输出应该是 transform：rotateY（360deg）。我尝试了下面的选项，但没有一个似乎工作（输出被提及为注释）。

If I give input as type='rotateY' and value='360deg', the output should be transform: rotateY(360deg). I have tried the below options but none of them seem to be working (output is mentioned as comment).

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

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

How should I code it to get the output as required? Please help.

注意：mixin代码还有很多其他项目，我已经张贴了需要修复的行。

Note: The mixin code has a lot of other items also, I have posted just the line that needs fixing.

只需使用〜转义字符串，如下所示。这样做可以确保报价不会在输出CSS中打印。

Just escape the string using ~ like shown below. Doing this would make sure that the quotes are not printed in the output CSS.

输入代码：

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

或

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

Mixin Call ：

.transform(rotateY;360deg);

输出CSS ：

transform: rotateY(360deg);

这篇关于LESS mixin - 不带引号的输出值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！