Wie kann ich Variablen verwenden, um Eigenschaftsnamen in LESS dynamisch zu erstellen?

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 den Eigenschaftswert einfügen

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 < 1.4.0)

Diese Problemumgehung erstellt eine virtuelle Klasse oder einen Regelsatz, der Folgendes enthält die Anbieter 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.0 zu überwinden:

@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.
Das obige ist der detaillierte Inhalt vonWie kann ich Variablen verwenden, um Eigenschaftsnamen in LESS dynamisch zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!