sass函数必须用@return返回合法css值，禁止返回字符串或未计算表达式；单位运算须用math.div()并统一单位；calc()内应直接调用函数而非返回字符串；css变量需用#{$var}插值。
函数没写 @return 或返回类型不匹配
最常见的情况是函数体里漏了 @return，或者返回了非法值。Sass 函数必须显式用 @return 给出结果，且该结果得是浏览器能直接解析的 CSS 值——比如 2rem、#007bff、rgba(0, 0, 0, 0.5)。返回字符串（如 "2rem"）或未计算表达式（如 $value / 16px 不加括号包裹），编译会报 Invalid CSS after ""。
- 错误写法：
@function px-to-rem($v) { $base: 16px; $v / $base * 1rem; }—— 缺@return，结果被丢弃 - 正确写法：
@function px-to-rem($v) { $base: 16px; @return ($v / $base) * 1rem; } - 颜色函数同理：用
darken($color, 10%)，别拼"darken(" + $color + ", 10%)"
单位混用或除零导致编译失败
Sass 对单位运算很严格，math.div() 是唯一安全的除法方式，尤其在 Dart Sass ≥4.0 中。直接用 / 会在大多数属性中触发 Invalid CSS after "100px" 错误。更隐蔽的问题是单位不一致或除零——比如 math.div(100px, 0) 返回 Infinity，CSS 无法解析；math.div(1rem, 16) 得到的是 0.0625rem，而非你想要的无单位比值。
- 统一单位再除：
math.div(1.5rem, 1rem)→1.5，之后再做比例运算 - 手动 guard 除零：
@if $denominator != 0 { @return math.div($num, $denominator); } - 避免混合单位：
math.div(100px, 1rem)直接报错，Sass 不自动转换单位
把函数结果当字符串拼进 calc() 里
有人想让函数返回 "calc(#{...})" 字符串，以为能交给浏览器运行时计算。这完全行不通——Sass 函数返回的是编译期值，返回字符串就真输出字符串，最终生成类似 width: calc(32px / 16rem); 这种非法语法。真正需要运行时计算的场景，应该把函数用在 calc() 内部，而不是让它生成 calc()。
- 错误：
@return "calc(#{$value} / 16rem)"; - 正确：
width: calc(#{px-to-rem(32px)} + 1rem); - 或者干脆不用函数：
width: calc(2rem + 1rem);—— 简单场景没必要绕一圈
在 CSS 自定义属性里直接写 Sass 变量名
写 --size: $size; 不会生效，Sass 解析器根本不认识这种写法，整条声明会被跳过。CSS 变量要接收 Sass 计算结果，必须用插值 #{$size}，而且插值内容得是纯值，不能带表达式。
- 错误：
:root { --size: $size; }→ DevTools 里看不到这个变量 - 正确：
:root { --size: #{$size}; } - 复杂计算先赋值再插值：
$computed: math.div(100%, 3); :root { --third: #{$computed}; }
函数本身不难写，难的是分清「编译期计算」和「运行时计算」的边界。所有返回值都得是静态、合法、单位明确的 CSS 值，任何试图把函数变成 JS 式动态逻辑的操作，都会在编译或运行时崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
