在循环内连接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;
}

等等。

有什么想法吗？

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