Dart Sass 2.0 分层解析导致 / 在 calc()、变量赋值、颜色函数中报错：calc() 必须用于属性值；math.div() 需 @use "sass:math"；hsl()/rgba() 斜杠语法仅限纯 CSS 上下文。
不是色彩计算公式本身错了，而是你写的 / 被 Dart Sass 2.0 当成了除法运算符，而它现在拒绝在 Sass 层面无条件解析这种写法——尤其当单位不匹配、或上下文其实是 CSS 原生语法时，就会直接报错。
calc() 里的 / 突然报错：其实是解析层切换了
Dart Sass 2.0 启用分层解析后，calc() 内部的 / 应由浏览器原生 CSS 解析器处理，本不该报错。但如果你看到类似 SassError: Invalid CSS after "100%": expected expression，说明当前文件仍被旧模式解析，或者你误把 calc() 写在了不允许的位置（比如变量赋值右侧）。
- ✅ 正确：直接在属性值中写
width: calc(100% / 3);—— 这是合法 CSS，Dart Sass 2.0 放行 - ❌ 错误：
$w: calc(100% / 3);—— Sass 不支持把calc()结果赋给变量，会报Invalid CSS - ⚠️ 注意：Vite 或 Webpack 若未正确识别 Sass 版本，可能回退到旧 parser，需确认
css.preprocessorOptions.scss.api = 'modern-compiler'已启用
math.div() 报 Function not found：没导入模块就调用
math.div() 不是开箱即用的全局函数，Dart Sass 1.33+ 起必须显式 @use "sass:math" 才能访问，否则就是“不存在”。
- 必须在使用它的 SCSS 文件顶部第一行加：
@use "sass:math"; - 调用时不能省略命名空间：
math.div($a, $b)，不是div($a, $b) - 如果多个文件都用，统一在主入口（如
_index.scss）里@use "sass:math" as math;，子文件自动继承 - 别在
additionalData中混写@use和@import，Dart Sass 会直接拒绝解析整段
颜色梯度、hsl() 或 rgba() 里带 / 的写法崩了
CSS 新标准允许 hsl(200 50% 50% / 0.8)、rgba(0 0 0 / 0.5) 这类斜杠分隔语法，但 Dart Sass 早期版本（尤其是 1.x）会把它当成除法提前解析，导致编译失败。
- ✅ 正确做法：确保这些写法只出现在纯 CSS 上下文中（如样式规则体内部），不要放在变量、
@if判断或@return表达式里 - ❌ 错误示例：
$color: hsl(200 50% 50% / 0.8);→ Sass 层试图解析/，报错 - ? 临时绕过：用字符串拼接 +
unquote()，但仅限不得已时用，破坏可读性 - ? 更稳方案：改用传统逗号语法（如
hsl(200, 50%, 50%)）或 CSS 变量承接新语法
真正卡住人的地方，往往不是不会写 math.div()，而是没意识到：Dart Sass 2.0 不再替你区分“这里是 CSS、那里是 Sass”，它把所有 / 都按语义归类——该交还给浏览器的，就绝不插手；该由 Sass 计算的，就必须走明确函数。你得自己划清这条线，而不是等它猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
