Wie generiert man dynamisch durch Kommas getrennte Spaltenklassen in SCSS?

Dynamisches Generieren einer Liste von Spaltenklassen mit Komma-Trennung

In Rastersystemen ist es ein häufiges Szenario, eine dynamische Liste von Spaltenklassen basierend auf zu generieren eine bestimmte Anzahl von Spalten. SCSS, eine Erweiterung von CSS, bietet eine leistungsstarke Lösung für solche Szenarien. Es kann jedoch schwierig sein, die gewünschte durch Kommas getrennte Liste von Klassen zu erhalten.

Um eine dynamische Liste von Spaltenklassen mit Kommas als Trennzeichen zu erstellen, können Sie die leistungsstarke @extend-Direktive in SCSS nutzen. So funktioniert es:

1. Definieren Sie eine Platzhalterklasse mit den gewünschten Stilen:

%float-styles {
  float: left;
}

2. Erstellen Sie ein Mixin, das @extend verwendet, um diese Stile anzuwenden die generierten Spaltenklassen:

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

3. Rufen Sie das Mixin auf, um die Spalte zu generieren Klassen:

@include col-x-list;

4. Definieren Sie $columns mit der gewünschten Anzahl von Spalten:

$columns: 12;

Dieser Ansatz generiert eine durch Kommas getrennte Liste von Spalten Klassen mit dem gewünschten Float-Stil, wie zum Beispiel:

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

Durch die Verwendung von @extend können Sie Stile effektiv von einem anwenden Selektor zu einem anderen, was Ihnen hilft, eine dynamisch generierte Liste von Spaltenklassen mit minimaler Codeduplizierung zu erstellen.

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