sass会把calc()当作普通表达式处理，因其默认解析括号内数学运算，导致单位混合时报错；应使用#{"calc(...)"}插值输出原样css。
为什么 Sass 会把 calc() 当成普通表达式处理
Sass 默认会对括号内的内容做数学运算，比如 calc(100% - 20px) 里的 100% - 20px 会被 Sass 尝试计算——但它不支持单位混合运算，结果直接报错 Invalid CSS after "calc(100%": expected expression (e.g. 1px, bold), was "- 20px)"。这不是浏览器问题，是 Sass 编译器提前“插手”了。
用引号包裹 calc() 避免被解析
最简单可靠的方式：把整个 calc() 表达式写成字符串，Sass 不会解析引号内的内容，原样输出到 CSS。
- ✅ 正确写法：
width: "#{calc(100% - 20px)}"; - ✅ 也可用单引号：
height: '#{calc(50vh + 1rem)}'; - ⚠️ 注意：引号必须存在，且
calc()必须在#{}插值中，否则只是普通字符串字面量，不会生效 - ? 插值里可拼接变量：
margin-left: #{calc(#{$gap} + 10px)};（前提是$gap是合法 CSS 值，如20px）
避免用 @function 封装 calc()
有人试图写个 Sass 函数来“生成” calc，比如 @function calc($a, $op, $b) { @return calc(#{$a} #{$op} #{$b}); } —— 这看似灵活，实际埋雷：
- ❌ 无法处理嵌套 calc，如
calc(calc(100% / 3) - 1em) - ❌ 运算符
$op会被当成字符串字面量，空格控制困难，容易产出calc(100%-10px)（缺空格，部分浏览器不认） - ❌ 变量类型校验为零，传入
$a: 10（无单位）会导致无效 CSS - ✅ 直接写字符串插值更可控、更易读、更少出错
PostCSS 或现代 Sass（Dart Sass）的兼容性提醒
Dart Sass（当前主流）对插值支持稳定，但仍有边界情况：
- ✅
#{calc(...)}在属性值任意位置都安全（如transform: translateX(#{calc(100vw - 50px)});） - ⚠️ 不要嵌套插值：
#{calc(#{100px})}会先求内层再拼接，失去原意 - ⚠️ 如果用了
postcss-calc等插件，它会在 CSS 层做计算，此时 Sass 层只需输出合法 calc 字符串，无需干预 - ? 检查编译后 CSS 是否含真实
calc()：若看到width: calc(100% - 20px);，说明成功；若仍是width: "calc(100% - 20px)";，说明漏了#{}或引号位置错了
真正卡住人的往往不是语法本身，而是忘记 Sass 编译阶段和浏览器运行阶段的职责分界——calc() 是给浏览器执行的，Sass 只负责把它原封不动送过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
