Comment puis-je utiliser des variables pour créer dynamiquement des noms de propriétés dans LESS ?

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 propriété

Cette solution de contournement injecte des propriétés créées dynamiquement 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 < 1.4.0)

Cette solution de contournement construit une classe virtuelle ou un ensemble de règles qui inclut les fournisseurs et construit récursivement 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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!