在循环内串联Sass变量

我认为可以这样连接：

$sizes: 6;

@for $i from 1 through $sizes {
    .font-size-#{$i} {
        font-size: $h#{($i)}-font-size;
    }
}

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

当我有这些变量时：

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

等等

---

有什么想法吗？

您是一定要将字体大小存储在单独的变量中，还是可以将它们存储在地图中

如果地图是一个选项，您可以这样解决它：

$sizes: 6;

@for $i from 1 through $sizes {
    .font-size-#{$i} {
        font-size: $h#{($i)}-font-size;
    }
}

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

---

这回答了你的问题吗？我把所有东西都存储在变量中，但是我喜欢这个解决方案。你认为用变量也有可能吗？