CODEWITHSUNDEEP
sasscompass-sass
levipadre
levipadre

Reputation: 619

Concatenate Sass variable within loop

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?

Upvotes: 1

Views: 424

Answers (1)

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

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

Upvotes: 1

Related Questions