SASS使用math.div和变量编译报Invalid CSS错误求助

问题根因 #

你使用的Web Compiler v1.12.394内置的是早已停止维护的LibSass编译器，最高仅支持到Sass 3.5版本，而math.div()是Dart Sass 1.23.0才新增的API，同时依赖Sass模块系统，旧版编译器完全无法识别该语法，因此抛出解析错误。

可用解决方案 #

• 临时兼容方案：直接改用旧版Sass除法语法即可正常编译，无需调整其他配置，代码修改为：

$spacer: 1rem !default;
$headings-margin-bottom: ($spacer / 2) !default;

注意：该写法在新版Dart Sass中会触发弃用告警，仅适合临时解决当前环境的编译问题。

• 长期支持新语法方案：替换已停止更新的Web Compiler扩展，改用支持最新Dart Sass的编译工具，可选操作如下：
  • 更换VS的Sass编译扩展为内置Dart Sass的维护版本
  • 前端项目通过npm安装sass包，自行配置编译脚本处理Sass文件编译
    升级到支持的编译器后，需要在Sass文件顶部引入math模块，才能正常使用math.div()语法，完整示例：

@use 'sass:math';
$spacer: 1rem !default;
$headings-margin-bottom: math.div($spacer, 2) !default;

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