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中文网其他相关文章！
