Объединить переменную Sass в цикле

Question

Я думаю, что можно объединить так:

$sizes: 6;

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

, когда у меня есть эти переменные:

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

В основном я хочу создать классы размера шрифта, чтобы они соответствовали переменным заголовка Например:

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

et c ...

Есть идеи?

Answer 1

Обязаны ли вы хранить размеры шрифтов в отдельных переменных или их можно хранить на карте?

Если карта является опцией, вы можете решить ее следующим образом:

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