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

Génération dynamique d'une liste de classes séparées par des virgules dans SCSS

La création de systèmes de grille dynamiques dans SCSS nécessite souvent de générer une liste de classes de colonnes séparées par des virgules. Cela simplifie l’application de styles communs sur différents nombres de colonnes. Cependant, écrire un tel code peut être difficile.

Création dynamique de colonnes

Le code SCSS fourni crée avec succès des classes de colonnes basées sur une variable $columns. Cependant, générer une liste de ces classes séparées par des virgules reste un obstacle.

Utiliser @extend

Au lieu de créer des définitions de classe individuelles pour chaque colonne, envisagez d'utiliser le @ étendre la directive. En définissant un mixin qui étend les styles flottants prédéfinis, vous pouvez obtenir l'effet souhaité :

%float-styles {
  float: left;
}

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

Dans ce code :

• L'espace réservé %float-styles définit le style à étendre.
• La @mixin col-x-list crée la liste des classes.
• La boucle @for parcourt les numéros de colonnes.
• Chaque classe étend les %float-styles, héritant de sa propriété float.

CSS résultant

Le CSS générés à l'aide de cette approche ressemblera à ce qui 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;
}

Cela fournit une liste de classes qui héritent de la propriété float de l'espace réservé % float-styles. En tirant parti de @extend, vous pouvez simplifier le code tout en conservant la fonctionnalité souhaitée.

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!