如何使用變數在 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中文網其他相關文章！