Wie generiert man dynamisch durch Kommas getrennte CSS-Klassen in SASS?

Dynamisches Generieren einer durch Kommas getrennten Liste von Klassen

In SASS kann die Erstellung dynamischer und konfigurierbarer Rastersysteme eine Herausforderung sein. Ein solches Hindernis ist die dynamische Generierung einer Liste durch Kommas getrennter Spaltenklassen basierend auf der Anzahl der definierten Spalten.

Um dies zu erreichen, können wir das @extend-Mixin verwenden. So geht's:

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

Dieser SCSS-Code erreicht Folgendes:

• Definiert eine Variable $columns, um die Anzahl der Spalten anzugeben.
• Erstellt einen Platzhalterstil Blattregel %float-styles, die die gewünschte Eigenschaft für die Spaltenklassen definiert.
• Verwendet die @mixin col-x-list, um jede Spalte zu durchlaufen und die definierten Stile darauf anzuwenden.
• Enthält das col-x-list-Mixin, um die gewünschte Klassenliste zu generieren.

Dieser Ansatz generiert eine CSS-Ausgabe wie folgt:

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

Diese Ausgabe stellt Ihnen eine dynamisch generierte Liste von durch Kommas getrennten Spaltenklassen zur Verfügung, die angewendet werden können zu Ihrem Netzsystem.

Das obige ist der detaillierte Inhalt vonWie generiert man dynamisch durch Kommas getrennte CSS-Klassen in SASS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!