Visual Studio Code Sass Compiler不支持@each语法编译问题求助

报错原因 #

• 你的@each代码块没有嵌套在父选择器内部，&作为父选择器标识符无法在全局上下文生效，引发解析异常导致变量识别失败。
• 你定义的$colors列表内的取值是未声明的标识符，直接赋值给background时会被识别为未定义变量，你需要将颜色值定义为映射表，把类名字符串和实际色值对应。

正确代码示例（缩进式SASS） #

// 定义色值映射表
$color-map: (
  blood: #c41e3a,
  red: #ff0000,
  melon: #fec5bb,
  melon2: #fcd5ce,
  blue: #0000ff,
  blue2: #0077b6,
  blue3: #00b4d8,
  teal: #008080,
  green: #008000,
  green2: #38b000,
  green3: #70e000,
  green4: #9ef01a,
  pink: #ffc0cb,
  pink2: #ff8fab,
  pink3: #ff5d8f,
  orange: #ffa500,
  orange2: #ffb703,
  yellow: #ffff00,
  yellow2: #fcca46,
  purple: #800080,
  lavender: #e6e6fa,
  lilly: #e8f0fe,
  brown: #a52a2a,
  gray: #808080,
  gray2: #d3d3d3,
  kosmos: #647dee,
  soviet: #ff0033,
  black: #000000
)
// 嵌套到你需要的父选择器内，比如全局容器类
.page-container
  @each $color-name, $color-value in $color-map
    &.color-#{$color-name}
      .explanation-sidebar ul li a:before,
      .explanation-actions .button
        background: $color-value

编译方案说明 #

• Dart Sass完全支持缩进式SASS语法，你之前编译失败是因为未正确指定文件格式：只要文件后缀为.sass，直接执行sass 输入文件路径.sass 输出文件路径.css即可正常编译。
• 如果你习惯用VS Code实时编译，可以自己配置VS Code的tasks.json调用本地Dart Sass命令，比第三方打包的Live Sass Compiler兼容性更强，不会出现版本适配问题。
• 临时救急可以使用node-sass的最终兼容版本，仅适合老项目临时维护，新项目优先选择Dart Sass。

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