Comment générer dynamiquement des classes de colonnes séparées par des virgules dans SCSS ?

Génération dynamique d'une liste de classes de colonnes avec séparation par des virgules

C'est un scénario courant dans les systèmes de grille pour générer une liste dynamique de classes de colonnes basées sur un nombre donné de colonnes. SCSS, une extension de CSS, fournit une solution puissante pour de tels scénarios. Cependant, il peut être difficile d'obtenir la liste de classes souhaitées séparées par des virgules.

Pour créer une liste dynamique de classes de colonnes séparées par des virgules, vous pouvez tirer parti de la puissante directive @extend dans SCSS. Voici comment cela fonctionne :

1. Définissez une classe d'espace réservé avec les styles souhaités :

%float-styles {
  float: left;
}

2. Créez un mixin qui utilise @extend pour appliquer ces styles à les classes de colonnes générées :

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

3. Appelez le mixin pour générer la colonne classes :

@include col-x-list;

4. Définissez $columns avec le nombre de colonnes souhaité :

$columns: 12;

Cette approche générera une liste de colonnes séparées par des virgules classes avec le style flottant souhaité, telles que :

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

En utilisant @extend, vous pouvez appliquer efficacement les styles d'un sélecteur à un autre, vous aidant à obtenir une liste de classes de colonnes générée dynamiquement avec une duplication de code minimale.

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!