Изменение размера шрифта элементов с помощью карты, списка и для l oop в sass

Question

Мне нужно получить значения из карты в список, а затем изменить размер шрифта h1, h2, h3, используя значения из списка для l oop. Мой код выглядит так:

$font-sizes: (
  fs1: 100px,
  fs2: 50px,
  fs3: 6px
);

$list-of-font-sizes: map-values($font-sizes);

@for $i from 1 through 3 {
  h#{$i} {
    @each $size in $list-of-font-sizes {
      font-size: $size;
    }
  }
}

Он не работает, и я не знаю почему. Я пробовал также так:

@each $size in $list-of-font-sizes {
  @for $i from 1 through 3 {
    h#{$i} {
      font-size: $size;
    }
  }
}

Answer 1

Вы можете использовать @for l oop.
Затем вы используете его индекс через nth, чтобы получить каждый размер.

@for $i from 1 through length($list-of-font-sizes) {
  h#{$i} {
    font-size: nth($list-of-font-sizes, $i);
  }
}