SCSS：在@each 中使用动态变量

Question

I am using SCSS to loop over each size and create individual classes.

File: styles.scss

@import 'variables';

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

File: _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;

Expected result of above code is:

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

But the actual code I get is:

.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

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