How to dynamically generate a list of classes with commas separating them?

by

I think you may want to take a look at @extend. If you set that up something like:

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

It should render in your css file as:

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

@extend in the docs.

More Related Contents:

  1. What’s the difference between SCSS and Sass?
  2. How to create color shades using CSS variables similar to darken() of Sass?
  3. Angular-cli from css to scss
  4. SASS: randomly pick background-image from a list
  5. Is there a SASS.js? Something like LESS.js?
  6. Sass Invalid CSS Error: “expected expression”
  7. Dynamic Sass Variables
  8. Ampersand (&) at the end, and part of, a selector in SASS
  9. Customize Bootstrap 4’s grid-system Breakpoints
  10. @import in @if statement in Sass
  11. How can one import only variables and mixins from Sass stylesheets?
  12. Have a variable in images path in Sass?
  13. Next.js Global CSS cannot be imported from files other than your Custom
  14. Proper SCSS Asset Structure in Rails
  15. How to compile or convert sass / scss to css with node-sass (no Ruby)?
  16. CSS-Only Sticky Table Headers In Chrome
  17. SCSS extend a nested selector and override the nested rulesets
  18. Sass @each with multiple variables
  19. SASS indented syntax on multiple lines?
  20. Placeholder Mixin SCSS/CSS
  21. Why put in front of the file name “_” or “_” in scss/css?
  22. Does LESS have an “extend” feature?
  23. How to control number of items per row using media queries in Flexbox?
  24. Text Stroke (-webkit-text-stroke) css Problem
  25. Creating CSS3 Circles connected by lines
  26. How to properly introduce a light/dark mode in Bootstrap?
  27. Sass and rounding down numbers. Can this be configured?
  28. SASS calculate HSL Difference between 2 colours
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment