Wie erstelle ich dynamisch eine durch Kommas getrennte Liste von CSS-Klassen in SCSS?

Dynamisches Generieren einer durch Kommas getrennten Liste von Klassen in SCSS

Das Erstellen dynamischer Rastersysteme in SCSS erfordert oft das Generieren einer Liste von durch Spalten getrennten Klassen durch Kommas. Dies vereinfacht die Anwendung gängiger Stile auf unterschiedliche Spaltenzahlen. Allerdings kann das Schreiben eines solchen Codes eine Herausforderung sein.

Dynamische Spaltenerstellung

Der bereitgestellte SCSS-Code erstellt erfolgreich Spaltenklassen basierend auf einer Variablen $columns. Das Erstellen einer durch Kommas getrennten Liste dieser Klassen bleibt jedoch eine Hürde.

Verwenden von @extend

Anstatt individuelle Klassendefinitionen für jede Spalte zu erstellen, sollten Sie die @extend verwenden. Erweiterungsdirektive. Durch die Definition eines Mixins, das vordefinierte Float-Stile erweitert, können Sie den gewünschten Effekt erzielen:

%float-styles {
  float: left;
}

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

In diesem Code:

• Der Platzhalter %float-styles definiert den Stil erweitert werden.
• Die @mixin col-x-list erstellt die Liste der Klassen.
• Die @for-Schleife iteriert durch Spaltennummern.
• Jede Klasse erweitert die %float-styles und erbt ihre Float-Eigenschaft.

Resultierendes CSS

Das CSS Die mit diesem Ansatz generierten Dateien sehen in etwa wie folgt aus:

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

Dies stellt eine durch Kommas getrennte Liste dar von Klassen, die die Float-Eigenschaft vom Platzhalter %float-styles erben. Durch die Nutzung von @extend können Sie den Code vereinfachen und gleichzeitig die gewünschte Funktionalität beibehalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamisch eine durch Kommas getrennte Liste von CSS-Klassen in SCSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!