CSS预处理器Sass中的函数@function自定义逻辑

sass函数必须显式使用@return返回值，否则编译报错；不支持css规则和指令；跨文件需@use并处理命名空间；参数须严格遵循$param: default和$rest…语法。

@function 必须有 @return，否则编译直接报错

很多人写完逻辑就以为完事了，结果 Sass 编译器抛出 Invalid CSS after "...": expected "{", was "}" 或更模糊的 Invalid NULL operation —— 实际上只是忘了写 @return。Sass 的 @function 不像 js 函数默认返回最后一行，它必须显式用 @return 终止并传出值。

• 没写 @return：函数体被当作文本块解析，导致语法错位
• @return 后面不能跟空行或注释（Sass 3.5+ 允许单行注释，但老版本会挂）
• 返回值类型要和调用处预期一致，比如想返回颜色却返回了字符串，后续 lighten() 就会炸

参数默认值和可变参数要用 $name: default 和 ...

Sass 不支持 JS 那种解构或展开语法，传参灵活性靠两个机制撑着：命名参数默认值、以及 ... 收集剩余参数。漏掉冒号或写成 = 会直接编译失败。

• 默认值写法只能是 $size: 16px，$size = 16px 是无效语法
• 接收不定参数时，必须声明为 $args...，且只能放在参数列表末尾
• 调用时若混用位置参数和命名参数，命名参数必须放后面，否则报 Invalid argument
• 常见场景：封装 rem 转换函数时，用 $base: 16px 避免硬编码；做颜色混合工具时用 $colors... 接收多个颜色值

不能在 @function 里写 CSS 规则或使用 @at-root

函数本质是值计算单元，不是代码生成器。试图在里面塞选择器、属性或嵌套指令，Sass 会立刻拒绝：Functions cannot contain rules or directives。这个限制常被初学者忽略，尤其想“顺便”加个调试 console.log 式输出时。

• 所有样式生成逻辑（比如根据主题生成一组 class）得挪到 @mixin 里
• 想调试函数内部值？用 @debug，但它只在编译时打印，不能返回或影响流程
• 需要条件分支算不同值？用 @if/@else，它们合法，但里面仍不能出现规则
• 性能提示：函数内避免反复调用耗资源的内置函数（如 str-index() 处理长文本），Sass 不做缓存

跨文件复用函数必须 @use，且注意命名空间冲突

旧的 @import 已弃用，@use 是唯一正路。但很多人 @use "tools" 之后直接写 px-to-rem(24)，结果报 undefined function —— 因为默认启用了命名空间，得写成 tools.px-to-rem(24)。

立即学习“前端免费学习笔记（深入）”；

• 想省略前缀，用 @use "tools" as *，但小心覆盖内置函数（比如重写了 map-get）
• 同名函数来自不同模块？必须保留命名空间，否则编译报错，不自动覆盖
• @use 只能出现在文件顶部，且每个路径只能用一次；重复 @use 不会报错，但第二次起无效
• 兼容性注意：Node Sass 不支持 @use，必须用 Dart Sass（sass CLI 或 webpack-sass-loader v11+）

最常被卡住的点不是语法多难，而是函数里偷偷混进了样式逻辑，或者跨文件调用时忘了命名空间——这两处 Sass 报错信息又特别不直白，容易绕半天。