Comment puis-je générer dynamiquement une liste de classes CSS séparées par des virgules dans SCSS ?

Création de listes de classes dynamiques avec séparation par des virgules

La possibilité de créer dynamiquement une liste de classes séparées par des virgules joue un rôle essentiel en CSS et SCSS, en particulier lors de la construction de mises en page réactives.

Prenons le cas d'un système de grille SCSS : vous souhaitez créer une grille dynamique système utilisant $columns comme variable pour déterminer le nombre de colonnes. Bien que l'utilisation de @mixin col-x pour générer des largeurs de classe individuelles fonctionne efficacement, le défi se pose lorsque l'on essaie de créer une liste de ces classes séparées par des virgules.

Résoudre le problème de logique

@extend dans SCSS fournit la solution à ce défi. En définissant un nouveau mixin appelé col-x-list qui inclut un espace réservé %float-styles contenant le style souhaité (float : left), vous pouvez appliquer de manière transparente ces styles à plusieurs classes en utilisant @extend :

$columns: 12;

%float-styles {
  float: left;
}

@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}

@include col-x-list;

Cette approche génère une liste de classes séparées par des virgules avec le style spécifié :

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
  float: left;
}

Référence Matériel

• [SCSS @extend Documentation](https://sass-lang.com/documentation/at-rules/extend)
• [SCSS @mixin Documentation] (https://sass-lang.com/documentation/at-rules/mixin)

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!