Comment utiliser des variables dans les noms de propriété dans LESS : propriétés dynamiques ou interpolation de nom de propriété ?

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

Lorsque vous travaillez avec LESS, la personnalisation des noms de propriété CSS en fonction de valeurs dynamiques peut être un défi . Cette question explore les limitations et les solutions de contournement pour la réplication d'un mixin CSS spécifique au fournisseur qui accepte les propriétés et les valeurs dynamiques. Dans Sass, un tel mixin utiliserait l'interpolation des noms de propriété.

Limitation dans LESS :

Actuellement, LESS ne dispose pas de prise en charge intégrée pour la génération dynamique de noms de propriétés. Cela rend impossible la réplication du mixin de préfixe du fournisseur directement dans LESS.

Solutions de contournement :

Malgré cette limitation, les solutions de contournement suivantes proposent des méthodes alternatives :

1. Injecter des propriétés générées dynamiquement dans les valeurs de propriété :

Enveloppez les propriétés et les valeurs dynamiques dans une propriété générique, telle que « fournisseur », et injectez-les dans la valeur d'une autre propriété.

Exemple :

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

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

2. Injectez des propriétés générées dynamiquement dans le nom de la classe suivante :

Étendez le concept de mixin du fournisseur. Créez plusieurs classes dans lesquelles les classes ultérieures injectent des règles de fournisseur dans leurs noms.

Exemple :

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

Solution de contournement améliorée pour 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);

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!