How to Dynamically Create Many Similar CSS Classes with Sass

Published Thursday, December 19, 2019 — 4 minute read

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:

1.Icon {
2  &--size-12 {
3    width: 12px;
4    height: 12px;
5    font-size: 12px;
6  }
7
8  &--size-18 {
9    width: 18px;
10    height: 18px;
11    font-size: 18px;
12  }
13
14  &--size-24 {
15    width: 24px;
16    height: 24px;
17    font-size: 24px;
18  }
19
20  &--size-30 {
21    width: 30px;
22    height: 30px;
23    font-size: 30px;
24  }
25
26  &--size-36 {
27    width: 36px;
28    height: 36px;
29    font-size: 36px;
30  }
31}
32

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:

1.Icon {
2  @for $i from 1 through 5 {
3    $base-size: 12;
4    $increment: 6;
5    $calculated-size: $base-size + ($i * $increment);
6
7    &--size-#{$calculated-size} {
8      width: #{$calculated-size}px;
9      height: #{$calculated-size}px;
10      font-size: #{$calculated-size}px;
11    }
12  }
13}
14

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

1$icon-sizes: 12, 16, 32, 48;
2
3.Icon {
4  @each $size in $icon-sizes {
5    &--size-#{$size} {
6      width: #{size}px;
7      height: #{size}px;
8      font-size: #{size}px;
9    }
10  }
11}
12