DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Dynamically Create Many Similar CSS Classes with Sass
Ashlee (she/her)
Ashlee (she/her)

Posted on • Updated on • Originally published at ashleemboyer.com

How to Dynamically Create Many Similar CSS Classes with Sass

Originally posted on my blog.

Let's say you allow 5 sizes of icons in your web application and they're in 6-pixel increments: 12, 18, 24, 30, and 36. Your Sass file might have something like the following to handle this:

.Icon {
  &--size-12 {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  &--size-18 {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  &--size-24 {
    width: 24px;
    height: 24px;
    font-size: 24px;
  }

  &--size-30 {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }

  &--size-36 {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }
}
Enter fullscreen mode Exit fullscreen mode

These all look really similar, right? The class names all have the same format, and each one sets a width, height, and font-size to be the same thing. Would you believe me if I told you that it's possible to dynamically create blocks of CSS for class names in Sass?

Well, believe me! It's true!

Here's one way you can introduce a @for to do this:

.Icon {
  @for $i from 1 through 5 {
    $base-size: 12;
    $increment: 6;
    $calculated-size: $base-size + ($i * $increment);

    &--size-#{$calculated-size} {
      width: #{$calculated-size}px;
      height: #{$calculated-size}px;
      font-size: #{$calculated-size}px;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

What if you don't have even increments, though? You can also loop through an array of values like this:

$icon-sizes: 12, 16, 32, 48;

.Icon {
  @each $size in $icon-sizes {
    &--size-#{$size} {
      width: #{size}px;
      height: #{size}px;
      font-size: #{size}px;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Did you know I have a newsletter? πŸ“¬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://ashleemboyer.com/newsletter.

Top comments (7)

Collapse
 
xiwcx profile image
i. welch canavan

love this trick!

maps combined with @each loops can also DRY up your code:

$gutter-column-sizes: (
    none: 0,
    sm: $unit / 6,
    md: $unit / 4,
    lg: $unit / 2,
    xl: $unit,
);

@each $gutter-column-size-key, $gutter-column-size-value in $gutter-column-sizes {
    .gutter-column--#{$gutter-column-size-key} {
        padding-inline-start: $gutter-column-size-value;
        padding-inline-end: $gutter-column-size-value;
    }
}
Collapse
 
ajaymarathe profile image
Ajay Marathe

Wow, that was helpful πŸ™

Collapse
 
silvestricodes profile image
Jonathan Silvestri

I haven't used SASS in a long time but it has for loops now?! damn

Collapse
 
seanmclem profile image
Seanmclem

SCSS is really a bag of tricks I need to learn more about

Collapse
 
ashleemboyer profile image
Ashlee (she/her) Author

Same!! πŸ˜„

Collapse
 
anilkhandei profile image
Anil Kumar Khandei

wow we can simplify css so much!!

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Hello, Ashlee!

I used to create column systems with the SASS @for loop... Never thought using it for things like this! Thank you so much! SASS indeed can be really powerful :)

🌚 Life is too short to browse without dark mode