如何通过Sass Map批量生成对应键值对的独立变量？

当然可以实现，借助Sass的@each循环遍历Map的键值对，结合变量插值就能批量生成你需要的独立变量。

步骤示例： #

1. 先定义你的原始Sass Map：

$heading: (   
    1: 5rem,   
    2: 4.5rem,   
    3: 4rem,  
    4: 3.5rem,   
    5: 3rem,   
    6: 2.5rem 
);

2. 编写@each循环批量生成变量：

@each $key, $value in $heading {
  // 拼接变量名并赋值，!global确保变量在全局作用域可访问（按需取舍）
  $heading-#{$key}: $value !global;
}

关键细节说明： #

• @each $key, $value in $heading：遍历目标Map，每次循环提取一组键（$key）和对应的值（$value）。
• $heading-#{$key}：通过#{}插值语法，把固定前缀heading-和当前循环的键拼接成新的变量名，自动生成$heading-1到$heading-6这些变量。
• !global关键字：如果你的循环写在局部作用域（比如Mixin、函数内部），需要加这个关键字让变量升级为全局变量，确保在其他代码块中能正常访问。如果循环本身就在根作用域，这个关键字可以省略。

验证效果： #

你可以在后续代码中直接调用生成的变量，比如：

h1 {
  font-size: $heading-1; // 编译后为font-size: 5rem;
}

h6 {
  font-size: $heading-6; // 编译后为font-size: 2.5rem;
}

内容的提问来源于stack exchange，提问作者Ally R