我如何逃避执行以下操作：
.prefix(@rule, @prop) {
-webkit-@{rule}: @{prop};
-moz-@{rule}: @{prop};
-o-@{rule}: @{prop};
-ms-@{rule}: @{prop};
@{rule}: @{prop};
}
我已经尝试了一堆不同的方式，在其包装~"stuff" ，包裹中的变量@{var} ，backslashing的-的......没有成功！
编辑：有一个拉REQ它在Github： https://github.com/cloudhead/less.js/pull/698
你原来的计划几乎与工作少1.6更新 。 这是所需的语法：
减
.prefix(@rule, @prop) {
-webkit-@{rule}: @prop;
-moz-@{rule}: @prop;
-o-@{rule}: @prop;
-ms-@{rule}: @prop;
@{rule}: @prop;
}
.test {
.prefix(box-sizing, border-box);
}
CSS输出
.test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
不过我对属性值的其他预处理原来的答复仍然成立。
LESS不允许动态性能（是的，我相信SASS一样）。
然而 ，这并不完全是坏事模式匹配需要被用于代替LESS，因为它迫使人们认为通过可能需要的模式匹配的差异 ，并容纳在你的代码的差异。
取以下作为一个例子。 它需要两个变量，（目前），允许两个人（在这里，与背景图像的渐变）。 它可以扩展，如果需要允许更多的额外的变数。
注意每个嵌套混入期望如何不同类型的东西要传递给第二个及以后的变量，并且每个人都可以预处理以不同的方式这些变量。 下面的例子中允许opacity来为十进制值或数值整数传递（虽然一个值1将承担的十进制值1.0 （即100％）不0.01 。它允许padding在box-sizing性，但将筛选出非Mozilla浏览器（它根据这个页面是不是在其他浏览器支持 ），所以你可以看到，“思”是通过什么每个属性可能需要是有益的，因而不必设置不同的模式匹配混入每个可以是有价值的。
减
.prefix(@prop, @v1, @v2:~'', @v3:~'') {
.prop(opacity) {
@decValue: `(@{v1} > 1 ? @{v1}/100 : @{v1})`;
@intValue: `(@{v1} <= 1 ? @{v1}*100 : @{v1})`;
filter: alpha(opacity=@intValue);
-webkit-opacity: @decValue;
-moz-opacity: @decValue;
opacity: @decValue;
}
.prop(boxSize) {
@filteredSupport: ~`("@{v1}" == "padding" ? "border" : "@{v1}")`;
-webkit-box-sizing: (~"@{filteredSupport}-box");
-moz-box-sizing: (~"@{v1}-box");
box-sizing: (~"@{filteredSupport}-box");
}
.prop(bkgGradient) {
.filterFirstTwoArgs(@type, @color, @gradient) {
background-color: @color;
background-image: ~"-webkit-@{type}-gradient(@{gradient})";
background-image: ~" -moz-@{type}-gradient(@{gradient})";
background-image: ~" -ms-@{type}-gradient(@{gradient})";
background-image: ~" -o-@{type}-gradient(@{gradient})";
background-image: ~" @{type}-gradient(@{gradient})";
}
.filterFirstTwoArgs(@v1, @v2, @v3);
}
.prop(@prop);
}
用它：
.myClass {
.prefix(opacity, 10);
.prefix(boxSize, padding);
.prefix(bkgGradient, linear, #F07575, "top, hsl(0, 80%, 70%), #bada55");
}
CSS输出
.myClass {
filter: alpha(opacity=10);
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;
-webkit-box-sizing: border-box;
-moz-box-sizing: padding-box;
box-sizing: border-box;
background-color: #f07575;
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
background-image: linear-gradient(top, hsl(0, 80%, 70%), #bada55);
}
从例如采取梯度输出例子这里找到 。
我只是想分享，我只是尝试了的事情，它的工作...注入dynamicaly创建供应商属性（用绳子插值）到另一个属性值。
.vendors(@property, @value) {
-inj:~"ect; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}
这是一个hackish的解决方案，但编译成工作的CSS（在前面，我们都注入到一个额外的属性）... itried它在less2css.org
我写了一些更多关于它的回答这个问题，这是近一个精确的复制：
在LESS（动态属性/属性名称插值）使用属性名称变量
编辑：我想出了一个更优雅的解决方案，我们注入一类的动态生成的属性分为以下几类的名称。 我将展示如何在该示例答案复制问题 。 这样，我们就不会产生不必要的额外属性。
我只是想补充一点，你可以用“减”的属性格式名称和解析器会忽略它，但添加字符串的其余部分。 这样，你就不会得到一个空的inject:; 或注射属性格式。 它仍然是哈克但嘿... :)
.prefix(@property, @value) {
-:~";-webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}
例：
.prefix(transition, "all .2s, color 0s");
将输出：
-webkit-transition: all .2s, color 0;
-moz-transition: all .2s, color 0;
-ms-transition: all .2s, color 0;
-o-transition: all .2s, color 0;
transition: all .2s, color 0;
