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

Using variables in property names in LESS (dynamic properties / property name interpolation)

LESS doesn't currently support dynamically inserted properties, despite some discussions on the topic on Stack Overflow.

Workaround #1: Inject Dynamically Generated Properties into Property Value

This workaround injects dynamically created properties into a hard-coded property value:

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

Workaround #2: Inject Dynamically Generated Properties into the Name of the Following Class (LESS < 1.4.0)

This workaround constructs a virtual class or ruleset that includes the vendors and recursively builds the next class:

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

Workaround #3: Inject Dynamically Generated Properties into the Name of the Following Class (LESS 1.4.0+)

This version uses recursion to overcome limitations in 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);
}

In LESS versions 1.6 and above, property name interpolation is implemented natively, so no workarounds are needed.

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!