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

使用 map：

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