How to Dynamically Generate Comma-Separated CSS Classes in SASS?

Dynamically Generating a Comma-Separated List of Classes

In SASS, creating dynamic and configurable grid systems can be challenging. One such obstacle is dynamically generating a list of comma-separated column classes based on the number of columns defined.

To achieve this, we can utilize the @extend mixin. Here's how:

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

This SCSS code accomplishes the following:

• Defines a variable $columns to specify the number of columns.
• Creates a placeholder style sheet rule %float-styles that defines the desired property for the column classes.
• Utilizes the @mixin col-x-list to loop through each column and apply the defined styles to it.
• Includes the col-x-list mixin to generate the desired list of classes.

This approach generates a CSS output as follows:

.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 output provides you with a dynamically generated list of comma-separated column classes that can be applied to your grid system.

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