SCSS循环生成fxFlex选择器问题：变量未解析且值带引号

修改后的SCSS代码如下：

@for $i from 1 to 100 {
  $percent: $i * 1%;
  
  [fxFlex='#{$percent}'] {
    flex: 1 1 $percent;
  }
}

关键修改点： #

• 选择器变量插值：SCSS中，选择器里的变量必须用#{}包裹才能被解析替换，否则单引号内的$percent会被当作静态字符串输出。
• 百分比值类型处理：用$i * 1%生成的是数值类型的百分比，而非字符串。SCSS对数值类型的单位值输出时不会添加引号，刚好符合flex属性的语法要求；而原代码中$i + '%'生成的是字符串，输出时会自动添加引号。

修改后生成的CSS会符合预期：

[fxFlex='1%'] {
  flex: 1 1 1%;
}
[fxFlex='2%'] {
  flex: 1 1 2%;
}
/* ... 依次生成到99%的选择器 */

内容的提问来源于stack exchange，提问作者Ian Vink