使用 LESS 时，根据动态值自定义 CSS 属性名称可能是一个挑战。此问题探讨了复制接受动态属性和值的特定于供应商的 CSS mixin 的限制和解决方法。在 Sass 中，这样的 mixin 将利用属性名称插值。
LESS 中的限制：
目前，LESS 缺乏对动态属性名称生成的内置支持。这使得无法直接在 LESS 中复制供应商前缀 mixin。
解决方法：
尽管有此限制，以下解决方法提供了替代方法：
1.将动态生成的属性注入到属性值中：
将动态属性和值包装到通用属性（例如“供应商”）中，并将它们注入到另一个属性的值中。
示例：
.vendors(@property, @value) {
-inj: "~"@{property}: @{value}"";
}.test {
.vendors(transform, matrix(1, 0, 0, 1, 20, 20));
}2.将动态生成的属性注入以下类的名称中：
扩展供应商混合概念。创建多个类，其中后面的类将供应商规则注入其名称中。
示例：
.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}"): {};
}.this-class {
.test(next-class);
}LESS v1.4.0 的升级解决方法:
@nl: `"\n\t"`;
.multi(@props, @vals, @i, @inj) {
// extract property and value from lists
@property: extract(@props, 1);
@value: extract(@vals, 1);以上是如何在 LESS 中使用属性名称中的变量：动态属性或属性名称插值？的详细内容。更多信息请关注PHP中文网其他相关文章！
