如何使用变量在 LESS 中动态创建属性名称？

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

LESS 目前不支持动态插入属性，尽管有关该主题的一些讨论堆栈溢出。

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

此解决方法将动态创建的属性注入到硬编码属性值中：

.vendors(@property, @value, @pre: ect) {
  -inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

解决方法＃2：将动态生成的属性注入到以下类的名称中（LESS

此解决方法构造一个虚拟类或规则集，其中包括供应商并递归构建下一个类：

.vendors(@property, @value, @rest:"") {
  @inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}

.test(@nextclass){
  .vendors(transform, "matrix(2,0,0,2,20,20)");
  .vendors(transform-origin,"10px 10px", @inject);
  (~"{@{inject}} .@{nextclass}"){/*next class properties*/};
}

解决方法＃3：将动态生成的属性注入到以下类的名称中（LESS 1.4.0）

此版本使用递归来克服 LESS 1.4.0 中的限制：

@nl: `"\n\t"`;

.multi(@props,@vals,@i,@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);
}

在 LESS 1.6 及更高版本中，属性名称插值是本机实现的，因此不需要解决方法。

以上是如何使用变量在 LESS 中动态创建属性名称？的详细内容。更多信息请关注PHP中文网其他相关文章！