Wie verwende ich Variablen in Eigenschaftsnamen in LESS: Dynamische Eigenschaften oder Interpolation von Eigenschaftsnamen?

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

Bei der Arbeit mit LESS kann die Anpassung von CSS-Eigenschaftsnamen basierend auf dynamischen Werten eine Herausforderung sein . In dieser Frage werden die Einschränkungen und Problemumgehungen für die Replikation eines herstellerspezifischen CSS-Mixins untersucht, das dynamische Eigenschaften und Werte akzeptiert. In Sass würde ein solches Mixin die Interpolation von Eigenschaftsnamen nutzen.

Einschränkung in LESS:

Derzeit fehlt in LESS die integrierte Unterstützung für die dynamische Generierung von Eigenschaftsnamen. Dies macht es unmöglich, das Herstellerpräfix-Mixin direkt in LESS zu replizieren.

Problemumgehungen:

Trotz dieser Einschränkung bieten die folgenden Problemumgehungen alternative Methoden:

1. Dynamisch generierte Eigenschaften in Eigenschaftswerte einfügen:

Dynamische Eigenschaften und Werte in eine generische Eigenschaft wie „Anbieter“ einschließen und in den Wert einer anderen Eigenschaft einfügen.

Beispiel:

.vendors(@property, @value) {
  -inj: "~"@{property}: @{value}"";
}

.test {
  .vendors(transform, matrix(1, 0, 0, 1, 20, 20));
}

2. Fügen Sie dynamisch generierte Eigenschaften in den Namen der folgenden Klasse ein:

Erweitern Sie das Anbieter-Mixin-Konzept. Erstellen Sie mehrere Klassen, wobei die späteren Klassen Anbieterregeln in ihre Namen einfügen.

Beispiel:

.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);
}

Aktualisierte Problemumgehung für 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);

Das obige ist der detaillierte Inhalt vonWie verwende ich Variablen in Eigenschaftsnamen in LESS: Dynamische Eigenschaften oder Interpolation von Eigenschaftsnamen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!