我注意到用SASS编写的inuit.css有一个.vendor混合：
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
有没有办法在LESS中复制一些像e（）和@ {}这样的奇怪功能？
答案 0 :(得分：51)
从版本1.6开始（参见 changelog ），属性名称插值在LESS中实现。所以你不再需要任何魔法了。 （对于旧版本，请参阅我的原始答案。）
你的mixin基本上可以正常工作：
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);
}
就我而言，较少没有添加对动态插入属性的支持，这在以前已经讨论了很多次，请参阅：
所以它通常采用的方式是参数化mixins和模式匹配...所以它的编码更加困难......但是属性和不同的供应商无论如何有时需要一些不同的参数格式，所以a通过这种方式增加了更多的控制。
解决方法的第一个选项有点难看但我尝试了它并且它在http://less2css.org上工作。
所以，我尝试将动态创建的属性注入您硬编码的另一个属性的值（我在这里给了一个随机的“供应商”名称-inj，并为其赋值ect，但是你可能想要使用一些有用的东西，如果你已经从所有供应商mixin中添加了一个元素，包括）
.vendors(@property, @value, @pre: ect) {
-inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}
我们可以尝试一个例子 - 也许是为了让它变得有价值......让我们尝试变换简短：
<强> LESS：
.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，但感觉kinnda错误=）
所以我更多地使用了这个想法...并想到了一种不会产生不必要属性的方法。它将动态创建的属性注入到下一个类的名称中。让我告诉你我是如何让它工作的：
1）让我们定义一般供应商mixin（@rest参数将用于稍后排列多个供应商块）
.vendors(@property, @value, @rest:"") {
@inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}
2）构建一个我们希望包含供应商的虚拟类/规则集，但我们将其作为一个混合体，最终构建下一个类aswel - 所以我们真的做了一个mixin将以递归方式构建两个或更多类。例如（使用与上面相同的示例）我们可以编写类似这样的内容（注意在第二个@inject调用中使用.vendor()将两个供应商块绑定在一起）：
.test(@nextclass){
.vendors(transform, "matrix(2,0,0,2,20,20)");
.vendors(transform-origin,"10px 10px", @inject);
(~"{@{inject}} .@{nextclass}"){/*next class properties*/};
}
3）现在我们将这个mixin包装到另一个类中以显示在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*/
}
输出将只在一行中。
修改：为了获得更好的格式，您可以添加"\n"和"\t"的javascript插值，请参阅以下评论中的Scott建议。
这样，您现在可以使用供应商mixin链接多个类，而不会有任何不必要的属性。
我正在添加这个原因斯科特在其中一条评论中指出，版本1.4的更改将不允许解决方法＃2。但如果我们有点足智多谋，我们就能克服这个问题。让我们看看上面解决方法的问题并解决它们。
1）第一个问题是“(~".@{index}") { ...选择器插值已被弃用”，因此我们需要在单独的步骤中进行字符串插值。实现这个就足以从上面注入一个.vendors mixin。
LESS：（使用Scott的换行建议）：
@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）第二个问题是“mixins中的变量不再'泄漏'进入他们的调用范围”，但我注意到在1.4.0测试版中，如果只引入变量在mixin中，它仍然可以从包含规则集中调用，因此通过一点递归，您可以构造.vendors块，并在最后一步中将它们分配给一个新变量，然后将其用于注入。我也很兴奋并使用了此版本中引入的新extract()函数。使用变量@i，我们分配递归级别（要注入的供应商块数）。
<强> LESS：
@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测试版中对我很有用，但让我们看看未来会带来什么。
答案 1 :(得分：3)
我只是想补充一点，你可以使用'减'作为一个名称，解析器将忽略它，但添加其余的字符串。这样你就不会得到一个空的inject:;或注意力。
它仍然是hacky但是嘿......：）
.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;