How to Generate a Comma-Separated List of CSS Classes Dynamically in SCSS?

Generating a Comma-Separated List of Classes Dynamically in SCSS

Creating dynamic grid systems in SCSS often requires generating a list of column classes separated by commas. This simplifies the application of common styles across varying column counts. However, writing such code can be challenging.

Dynamic Column Creation

The provided SCSS code successfully creates column classes based on a variable $columns. However, generating a comma-separated list of these classes remains a hurdle.

Using @extend

Instead of creating individual class definitions for each column, consider using the @extend directive. By defining a mixin that extends pre-defined float styles, you can achieve the desired effect:

%float-styles {
  float: left;
}

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

In this code:

• The %float-styles placeholder defines the styling to be extended.
• The @mixin col-x-list creates the list of classes.
• The @for loop iterates through column numbers.
• Each class extends the %float-styles, inheriting its float property.

Resulting CSS

The CSS generated using this approach will resemble the following:

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

This provides a comma-separated list of classes that inherit the float property from the %float-styles placeholder. By leveraging @extend, you can simplify the code while maintaining the desired functionality.

The above is the detailed content of How to Generate a Comma-Separated List of CSS Classes Dynamically in SCSS?. For more information, please follow other related articles on the PHP Chinese website!