必须用@function声明并显式@return返回值，支持默认参数和条件分支；返回值类型需与调用上下文兼容，单位运算在编译期进行，不可返回字符串或css规则。
如何用 @function 定义一个返回数值的 Sass 函数
直接用 @function 声明，必须带 @return，且返回值类型要和调用上下文兼容（比如单位、颜色、数字等）。Sass 会自动做单位运算，但不自动转换类型——比如不能在期望长度的地方返回颜色。
常见错误是忘了写 @return，或返回了未计算的表达式（如直接写 $base * 1.5 而不加括号包裹），导致编译时报错 Invalid CSS after "...": expected expression。
- 函数名用 kebab-case（如
px-to-rem），避免与 CSS 内置函数冲突 - 参数可带默认值，如
$value: 16px；但类型不校验，靠使用者保证传入合法值 - 函数体里可嵌套调用其他函数（包括内置的
unit()、if()等）
怎么让函数支持不同单位输入并统一转成 rem？
关键不是“转换”，而是单位一致性判断 + 除法归一。Sass 不提供 pxToRem() 这类运行时转换，所有单位计算发生在编译期，所以得靠 unit() 检测输入单位，再手动除以基准值。
典型坑是：传入无单位数字（如 16）和带单位值（如 16px）行为不同；若基准值用 16px，那 16 / 16px 会得 1px⁻¹——完全错误。必须先用 strip-unit() 或 unitless() 处理。
@function px-to-rem($value) {
$base-font-size: 16px;
@if unit($value) == px {
@return ($value / $base-font-size) * 1rem;
} @else if unitless($value) {
@return ($value / 16) * 1rem;
}
@error "Only unitless numbers or px values are supported.";
}
为什么 calc() 不能在函数里直接拼字符串返回？
因为 Sass 函数返回的是编译期值，不是 CSS 字符串。如果写 @return "calc(#{$value} / 16rem)"，结果是字面字符串，会被当作文本插入 CSS，浏览器无法解析——最终生成 width: calc(32px / 16rem); 这种非法语法。
真正需要 calc() 的场景（比如混合单位），应该在属性值中直接用，而不是塞进函数返回值里：
- 函数只负责纯数值计算（如
32px → 2rem） - 需要动态计算留到 CSS 层，用
calc(#{px-to-rem(32px)} + 1rem) - 或者干脆不用函数，直接写
calc(2rem + 1rem)
函数里能用 @if 做条件分支吗？会影响输出体积吗？
可以，而且很常用。Sass 编译器会在编译时求值所有 @if 分支，只保留命中路径的代码，其余分支彻底丢弃——不会增加最终 CSS 体积。
但要注意：条件判断基于编译期已知值。如果传入变量来自 @import 外部或未定义，会报错；也不能判断媒体查询断点这类运行时才知的条件。
- 推荐用
unitless($val)判断是否无单位，比unit($val) == ""更健壮 - 多个分支优先写最可能命中的，减少编译器检查次数（虽影响微乎其微）
- 避免在函数里调用
@warn或@debug，它们只在编译时输出，不参与计算
函数本身不产生 CSS，只参与计算；真正容易被忽略的是单位隐式转换规则——比如 16px / 16 得 1px，而 16px / 16px 才得纯数字 1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
