我注意到，inuit.css，这是写在SASS，有.vendor混合式：
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
有没有一种方法能够在更短的一些奇怪的功能，如E（）和@ {}复制呢？
随着1.6版本（见的changelog ）属性名称插在LESS实现。 所以，你不需要任何魔法了。 （对于旧版本，请参阅我原来的答复。）
你会混入工作基本上原样：
减：
.vendor(@property; @value){
-webkit-@{property}: @value;
-moz-@{property}: @value;
-ms-@{property}: @value;
-o-@{property}: @value;
@{property}: @value;
}
/*example*/
.test {
.vendor(transform, translateX(20px));
}
CSS：
.test {
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
至于我而言少还没有添加动态插入的特性，这对这么多次了前面所讨论的支持，请参阅可能：
LESS CSS逃生具有不同前缀的整个CSS规则？
通用`vendors`混入
用更少的圆角表
因此，它通常做的方式将与参数混入和模式匹配......所以它是一点点硬编码...但性质和不同厂商反正有时需要的参数，格式略有不同，所以多一点控制加入这种方式。
的解决方法，第一种选择是丑了一点，但我想它和它的工作对http://less2css.org 。 那么，是什么我想是注入动态创建的属性到您硬代码（我只是给了一个随机的“供应商”名称的另一个属性的值-inj这里并赋予它的价值ect ，但你可能想使用的东西有用反而如果你已经从所有的供应商混入包括添加元素）
.vendors(@property, @value, @pre: ect) {
-inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}
我们可以尝试在一个例子 - 也许东西，使其价值......让我们试着变换短：
减：
.test-class{
.vendors(transform, matrix(1,0,0,1,20,20));
.vendors(transform-origin,"10px 10px");
}
CSS输出：
.test-class {
-inj: ect; -webkit-transform: matrix(1, 0, 0, 1, 20, 20); -moz-transform: matrix(1, 0, 0, 1, 20, 20); -ms-transform: matrix(1, 0, 0, 1, 20, 20); -o-transform: matrix(1, 0, 0, 1, 20, 20); transform: matrix(1, 0, 0, 1, 20, 20);
-inj: ect; -webkit-transform-origin: 10px 10px; -moz-transform-origin: 10px 10px; -ms-transform-origin: 10px 10px; -o-transform-origin: 10px 10px; transform-origin: 10px 10px;
}
这似乎产生工作的CSS但感觉金达错=）
于是我打了这个想法多一点......以及不产生不必要的性能的方式思考。 它注入动态创建的属性进入下一个类的名称。 让我告诉你我是如何得到它的工作：
1）让我们定义一个一般性厂商混入（该@rest参数将被用于后面排队多个供应商块）
.vendors(@property, @value, @rest:"") {
@inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}
2）构造，我们希望被列入供应商的虚拟类/规则集，但我们将其作为一个mixin是在端构建下一类aswel -所以我们真正使这将递归构建两个或多个类一个mixin。 例如（使用相同的例子如上述），我们可以写出这样的（请注意使用的@inject在第二.vendor()调用到两个vendor块粘结在一起）：
.test(@nextclass){
.vendors(transform, "matrix(2,0,0,2,20,20)");
.vendors(transform-origin,"10px 10px", @inject);
(~"{@{inject}} .@{nextclass}"){/*next class properties*/};
}
3）现在只要我们把这个包混入到另一个类的CSS显示：
.this-class{
.test(next-class);
}
得到的CSS将包括如下：
.this-class {
-webkit-transform: matrix(2, 0, 0, 2, 20, 20);
-moz-transform: matrix(2, 0, 0, 2, 20, 20);
-ms-transform: matrix(2, 0, 0, 2, 20, 20);
-o-transform: matrix(2, 0, 0, 2, 20, 20);
transform: matrix(2, 0, 0, 2, 20, 20);
-webkit-transform-origin: 10px 10px;
-moz-transform-origin: 10px 10px;
-ms-transform-origin: 10px 10px;
-o-transform-origin: 10px 10px;
transform-origin: 10px 10px;
}
.next-class {
/*next class properties*/
}
输出将只是都在一行。
编辑：对于更好的格式，你可以包括JavaScript的插值"\n"和"\t" ，看到斯科特在下面的评论意见。
这样，你现在可以环比上涨多个类别所有使用供应商混入，没有任何不必要的性能。
我加入这个事业斯科特在了与1.4版本到来的变化将不会允许变通方法＃2一个评论指出。 但是，如果我们都有点足智多谋，我们可以克服这个这个问题。 让我们来看看有哪些上面的解决方法的问题和解决这些问题。
1）第一个问题将是，“ (~".@{index}") { ...选择插值已过时”，所以我们需要做的串插在一个单独的步骤。 实现这个就足以注入一个.vendors从上面混入。
LESS：（使用斯科特的换行符建议）：
@nl: `"\n\t"`;
.vendors(@property, @value) {
@inject:~"@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
}
.test(@nextclass){
.vendors(transform, "matrix(2,0,0,2,20,20)");
@inj: ~"{@{inject}`'\n'`} `'\n'`.@{nextclass}";
@{inj} {/*next class properties*/}
}
.this-class{
.test(next-class);
}
CSS输出：
.this-class {
-webkit-transform: matrix(2,0,0,2,20,20);
-moz-transform: matrix(2,0,0,2,20,20);
-ms-transform: matrix(2,0,0,2,20,20);
-o-transform: matrix(2,0,0,2,20,20);
transform: matrix(2,0,0,2,20,20);
}
.next-class {
/*next class properties*/
}
2）第二个问题是：“在混入变量不再‘泄漏’到他们的呼叫范围”，但我在1.4.0测试发现，如果一个变量在一个mixin只介绍它仍然可以从所谓的包括规则集，所以一点点递推，你可以构建.vendors块，并在最后一步将它们分配到一个新的变量，你再使用注射。 我也很兴奋，并使用了新的extract()在这个版本中引入较少的功能。 具有可变@i我们分配递归的电平（待注射厂商块数）。
减：
@nl: `"\n\t"`;
.multi(@props,@vals,1,@inj) {
@property: extract(@props, 1);
@value: extract(@vals, 1);
@inject:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
}
.multi(@props,@vals,@i,@inj:"") when (@i > 0) {
@property: extract(@props, @i);
@value: extract(@vals, @i);
@injnext:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
.multi(@props,@vals,(@i - 1),@injnext);
}
@properties: "transform-origin" "transform";
@values: "10px 10px" "matrix(2,0,0,2,20,20)";
// string of other properties you want to include in the same class
@p: ~"@{nl}width:20px; @{nl}height:12px; @{nl}background-color:#000;";
.this-class {
.multi(@properties,@values,2,@p);
@inj: ~"{@{inject}`'\n'`} `'\n'`.next-class ";
@{inj} {/**/}
}
CSS输出：
.this-class {
width:20px;
height:12px;
background-color:#000;
-webkit-transform: matrix(2, 0, 0, 2, 20, 20);
-moz-transform: matrix(2, 0, 0, 2, 20, 20);
-ms-transform: matrix(2, 0, 0, 2, 20, 20);
-o-transform: matrix(2, 0, 0, 2, 20, 20);
transform: matrix(2, 0, 0, 2, 20, 20);
-webkit-transform-origin: 10px 10px;
-moz-transform-origin: 10px 10px;
-ms-transform-origin: 10px 10px;
-o-transform-origin: 10px 10px;
transform-origin: 10px 10px;
}
.next-class {
/*next class properties*/
}
现在，这个工作非常好，我在1.4.0测试版，但是让我们看到了未来带来什么。
我只是想补充一点，你可以用“减”的属性格式名称和解析器会忽略它，但添加字符串的其余部分。 这样，你就不会得到一个空的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;
