Comment générer dynamiquement des classes CSS séparées par des virgules dans SASS ?

Générer dynamiquement une liste de classes séparées par des virgules

Dans SASS, créer des systèmes de grille dynamiques et configurables peut être un défi. L'un de ces obstacles consiste à générer dynamiquement une liste de classes de colonnes séparées par des virgules en fonction du nombre de colonnes définies.

Pour y parvenir, nous pouvons utiliser le mixin @extend. Voici comment :

$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;

Ce code SCSS accomplit les tâches suivantes :

• Définit une variable $columns pour spécifier le nombre de colonnes.
• Crée un style d'espace réservé règle de feuille %float-styles qui définit la propriété souhaitée pour les classes de colonnes.
• Utilise le @mixin col-x-list pour parcourir chaque colonne et y appliquer les styles définis.
• Comprend le mixin col-x-list pour générer la liste de classes souhaitée.

Cette approche génère une sortie CSS comme suit :

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

Cette sortie vous fournit une liste générée dynamiquement de classes de colonnes séparées par des virgules qui peuvent être appliquées. à votre système de grille.

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!