如何在 LESS 中使用属性名称中的变量：动态属性或属性名称插值？

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

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