如何在 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 的升級解決方法:

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中文網其他相關文章！