Utilisation de variables dans les noms de propriété dans LESS (propriétés dynamiques/interpolation de nom de propriété)

LESS ne prend actuellement pas en charge les propriétés insérées dynamiquement, malgré quelques discussions sur le sujet sur Débordement de pile.

Solution n° 1 : injecter des propriétés générées dynamiquement dans la valeur de la propriété

Cette solution de contournement injecte dynamiquement propriétés créées dans une valeur de propriété codée en dur :

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

Solution n°2 : injecter des propriétés générées dynamiquement dans le nom de la classe suivante (LESS

Cette solution de contournement construit une classe virtuelle ou un ensemble de règles qui inclut les fournisseurs et construit de manière récursive la classe suivante :

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

Solution n°3 : injecter des propriétés générées dynamiquement dans le nom de la classe suivante (LESS 1.4.0)

Cette version utilise la récursivité pour surmonter les limitations de 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);
}

Dans les versions LESS 1.6 et supérieures, l'interpolation des noms de propriété est implémentée de manière native, donc aucune solution de contournement n'est nécessaire.