Sass函数必须显式用@return返回值，多分支逻辑中每个分支末尾都需@return，返回值须为原生类型且单位兼容，参数类型需主动校验，避免无效CSS或编译错误。
函数没写@return，编译直接报Invalid CSS after ""
这是最常踩的坑：Sass 函数必须显式用 @return 返回值，漏写或写在条件分支外（比如只在 @if 里写，@else 没写），编译器就认为函数“无返回”，报错 Invalid CSS after ""。这不是语法错，是语义缺失——Sass 不允许“空返回”。
- 检查每个
@function块末尾是否都有@return，哪怕只是@return null; - 多分支逻辑（
@if/@else if/@else）里，每个分支末尾都得有@return，不能只在第一个分支写 -
@return后面不能跟分号（;），Sass 会把它当语法错误；但括号内表达式可以带分号（如@return ($a * 2);）
返回了字符串或未计算表达式，结果变成无效 CSS
比如写 @return "calc(#{$value} / 16rem)"，Sass 真的就把这串字面量塞进 CSS，浏览器收到的是 width: calc(32px / 16rem); —— 这不是合法 calc()，单位混用且缺少空格，直接失效。
- 函数返回值必须是 Sass 原生类型（数字、颜色、布尔、列表等），不能是字符串拼接的“伪 CSS”
- 想做运行时计算，用原生
calc()；想做编译期计算，用math.div()或四则运算（确保单位兼容） - 别把带单位的值和纯数字硬除：
16px / 16得1px，但16 / 16px得1px⁻¹，完全反了
单位不匹配导致 math.div() 报错或结果意外
math.div($a, $b) 要求两个参数单位一致或都无单位，否则编译失败。常见于想把 1.5rem 换算成相对于 16px 的比例，却直接 math.div(1.5rem, 16) —— 结果是 0.09375rem，不是你要的 1.5 / 16 = 0.09375（无单位比值）。
- 先用
math.div(1.5rem, 1rem)得到纯数字1.5，再除以16 - 输入值不确定单位时，用
unitless($value)或unit($value) == "px"判断，再分支处理 - 别在
math.div()外再加单位：math.div(100px, 2) + px→50pxpx，错
函数调用时传入非法类型，错误延迟到使用处才暴露
Sass 不校验函数参数类型，@function px-to-rem($value) 声明了 $value，但传入 null、map 或字符串，函数体里可能直到 math.div($value, 16px) 才崩，报错位置远离调用点，难定位。
立即学习“前端免费学习笔记（深入）”；
- 在函数开头用
@if type-of($value) != number主动校验，配合@error提前中断 - 对 map 类型参数，用
map-get($map, key)取值前先@if map-has-key($map, key) - 避免在循环中反复调用同一函数做相同计算，提取为变量复用，减少出错面
函数真正难的不是写出来，是让返回值在任意调用上下文里都“稳得住”——单位、类型、边界值，三者缺一不可。多数问题不是语法错，而是编译期数值流没理清。
