在LESS中使用属性名称中的变量(动态属性/属性名称插值)

Question

我注意到用SASS编写的inuit.css有一个.vendor混合:

@mixin vendor($property, $value...){
    -webkit-#{$property}:$value;
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
            #{$property}:$value;
}

有没有办法在LESS中复制一些奇怪的功能,如e()和@ {}？

Answer 1

更新:LESS> = 1.6

从版本1.6开始(请参阅changelog),属性名称插值在LESS中实现.所以你不再需要任何魔法了.(对于旧版本,请参阅我的原始答案.)

你的mixin基本上可以正常工作:

减:

.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 <1.6

就我而言,较少没有添加对动态插入属性的支持,这在以前已经多次讨论过,请参阅:

• LESS CSS使用不同的前缀逃避整个CSS规则？

• 通用`供应商`mixin

• 圆形角桌与LESS

所以它通常采用的方式是参数化mixins和模式匹配...所以它的编码更加困难......但是属性和不同的供应商无论如何有时需要一些不同的参数格式,所以多一点控制以这种方式添加.

解决方法#1:将动态生成的属性注入属性值

解决方法的第一个选项有点难看但我尝试了它并且它在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}";
}

我们可以尝试一个例子 - 也许是为了让它变得有价值......让我们尝试变换简短:

减:

.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错误=)

解决方法#2:将动态生成的属性注入到下面的类的名称中(最多v1.3.3)

所以我更多地使用了这个想法......并想到了一种不会产生不必要属性的方法.它将动态创建的属性注入到下一个类的名称中.让我告诉你我是如何让它工作的:

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*/
}

输出将只在一行中.

编辑:为了更好的格式化,你可以包括javascript插值,"\n"并"\t"在下面的评论中查看斯科特的建议.

这样,您现在可以使用供应商mixin链接多个类,而不需要任何不必要的属性.

解决方法#3:使用递归将动态生成的属性注入到下一个类的名称(v1.4.0)中

我添加这个原因斯科特在其中一条评论中指出,版本1.4的更改将不允许解决方法#2.但如果我们有点足智多谋,我们就能克服这个问题.让我们看看上面解决方法的问题并解决它们.

1)第一个问题是" (~".@{index}") { ...不推荐使用选择器插值",因此我们需要在单独的步骤中进行字符串插值.实现这一点就足以.vendors从上面注入一个mixin.

少:(使用斯科特的换行建议):

@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我们分配递归级别(要注入的供应商块的数量).

减:

@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测试版中对我很有用,但让我们看看未来会带来什么.