Maison >interface Web >tutoriel CSS >Comment générer dynamiquement des classes CSS séparées par des virgules dans SASS ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-29 01:48:09625parcourir

How to Dynamically Generate Comma-Separated CSS Classes in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn