Concatenate Sass variable within loop

Question

I though it's possible to concatenate like this:

$sizes: 6;

@for $i from 1 through $sizes {
    .font-size-#{$i} {
        font-size: $h#{($i)}-font-size;
    }
}

when I have these variables:

$h1-font-size: 3.5rem;
$h2-font-size: 3rem;
$h3-font-size: 2.5rem;
$h4-font-size: 2rem;
$h5-font-size: 1.5rem;
$h6-font-size: 1rem;

Basically I want to create font-size classes to match with heading variables, like:

.font-size-1 {
   font-size: 3.5rem;
}
.font-size-2 {
   font-size: 3rem;
}

etc...

Any idea?

Does this answer your question? [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) — Arkellys, Feb 06 '20 at 12:21

score 1 · Answer 1 · answered Feb 06 '20 at 15:06

1

Are you bound to storing the font-sizes in separate variables, or can you store them in a map?

If a map is an option, you can solve it like this:

$heading-sizes: (
  1: 3.5rem,
  2: 3rem,
  3: 2.5rem,
  4: 2rem,
  5: 1.5rem,
  6: 1rem
);

@each $heading, $size in $heading-sizes {
  .font-size-#{$heading} {
    font-size: $size;
  }
}

answered Feb 06 '20 at 15:06

Cody MacPixelface

1,348
10
21

I store everything in variables, but I like the solution though. Do you think it's even possible with variables? – levipadre Feb 07 '20 at 18:14

Concatenate Sass variable within loop

1 Answers1