SASS中@for循环内动态调用现有变量的实现问询

你的问题在于SASS不支持直接通过字符串拼接的方式动态引用变量（比如$font-size-h#{i}这种写法是无效的）。要实现你想要的效果，最优雅的方式是使用Sass Map来管理这些标题字体大小变量，然后通过循环遍历Map来生成样式。

步骤1：将分散的变量整理为Sass Map #

首先把你定义的各个标题字体大小变量合并到一个Map中，这样既便于管理，也能轻松实现动态访问：

// 假设你已经定义了基础字体大小
$font-size-base: 16px;

$heading-font-sizes: (
  h1: floor($font-size-base * 2.6),
  h2: floor($font-size-base * 2.15),
  h3: ceil($font-size-base * 1.7),
  h4: ceil($font-size-base * 1.25),
  h5: $font-size-base,
  h6: ceil($font-size-base * 0.85)
);

步骤2：用@each循环生成标题样式 #

使用@each循环遍历Map中的键值对，直接为每个标题标签设置对应的字体大小，这比@for循环更简洁直观：

@each $heading, $size in $heading-font-sizes {
  #{$heading} {
    font-size: $size;
  }
}

如果你坚持使用@for循环 #

如果你更倾向于用@for循环实现，也可以通过Map的键来匹配对应的数值：

@for $i from 1 through 6 {
  $heading-key: "h#{$i}"; // 拼接成对应的Map键名
  h#{$i} {
    font-size: map-get($heading-font-sizes, $heading-key);
  }
}

为什么原写法无效？ #

Sass的变量插值语法#{}主要用于选择器、属性名或属性值的动态拼接，但不能直接用于变量名的动态引用。编译器无法识别$font-size-h#{i}这种拼接后的变量名，因此会报错。而Map是Sass官方推荐的用于管理关联数据的方式，完美解决这类动态变量访问的需求。

内容的提问来源于stack exchange，提问作者Bozhidar Georgiev