SCSS: использовать динамическую переменную внутри @each

Question

Я использую SCSS для зацикливания каждого размера и создания отдельных классов.

Файл: styles.scss

@import 'variables';

$font-list: xxl xl l m s xs;
@each $size in $font-list {
  .font-#{$size} {
    font-size: font-#{$size};
  }
}

Файл: _variable.scss

// Font sizes
$font-xxl: 21px !important;
$font-xl: 18px !important;
$font-l: 16px !important;
$font-m: 14px !important;
$font-s: 12px !important;
$font-xs: 10px !important;

Ожидаемый результат кода выше:

.font-xxl{
 font-size:  $font-xxl;
}
.font-xl{
 font-size:  $font-xl;
}
.font-l{
 font-size:  $font-l;
}
.font-m{
 font-size:  $font-m;
}
.font-s{
 font-size:  $font-s;
}
.font-xs{
 font-size:  $font-xs;
}

Но фактический код, который я получаю:

.font-xxl {
  font-size: font-xxl;
}

.font-xl {
  font-size: font-xl;
}

.font-l {
  font-size: font-l;
}

.font-m {
  font-size: font-m;
}

.font-s {
  font-size: font-s;
}

.font-xs {
  font-size: font-xs;
}

Answer 1

Используйте карту:

$font-sizes: (
  xxl: 21px,
  xl:  18px,
  l:   16px,
  m:   14px,
  s:   12px,
  xs:  10px
);

$font-list: xxl xl l m s xs;

@each $size in $font-list {
  .font-#{$size} {
    font-size: map-get($font-sizes, $size) !important;
  }
}