Variablen in Eigenschaftsnamen in LESS verwenden (dynamische Eigenschaften/Interpolation von Eigenschaftsnamen)

LESS unterstützt derzeit keine dynamisch eingefügten Eigenschaften, trotz einiger Diskussionen zu diesem Thema Stapelüberlauf.

Problemumgehung Nr. 1: Dynamisch generierte Eigenschaften in die Eigenschaft einfügen Wert

Diese Problemumgehung fügt dynamisch erstellte Eigenschaften in einen hartcodierten Eigenschaftswert ein:

.vendors(@property, @value, @pre: ect) {
  -inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

Problemumgehung Nr. 2: Dynamisch generierte Eigenschaften in den Namen der folgenden Klasse einfügen (LESS

Diese Problemumgehung erstellt eine virtuelle Klasse oder einen Regelsatz, der schließt die Anbieter ein und erstellt rekursiv die nächste Klasse:

.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*/};
}

Problemumgehung Nr. 3: Dynamisch generierte Eigenschaften in den Namen der folgenden Klasse einfügen (LESS 1.4.0)

Diese Version verwendet Rekursion, um Einschränkungen in LESS 1.4 zu überwinden .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);
}

In LESS-Versionen 1.6 und höher ist die Interpolation von Eigenschaftsnamen nativ implementiert, sodass keine Problemumgehungen erforderlich sind.