不能用 @mixin 生成渐变值，因为它是代码块注入器而非值处理器，展开后仅为声明语句，无法赋值或用于 mask-image 等需图像值的属性；应改用 @function 返回渐变字符串供灵活调用。
为什么不能用 @mixin 生成渐变值
@mixin 是代码块注入器，不是值处理器。它展开后就是一串 background-image: linear-gradient(...) 声明，无法赋给变量、也不能用在 mask-image 或 border-image 这类只接受图像值的地方。常见错误是写 @include gradient(to right, red, blue) 放在 mask-image: 后面——编译直接报错或静默失效。
用 @function 封装渐变值的正确姿势
真正该做的是把渐变逻辑拆成可复用的值计算函数，返回字符串形式的 CSS 函数调用表达式（如 "linear-gradient(to right, #f00, #00f)"），再由调用方决定怎么用。
- 方向参数必须传 keyword（如
to bottom），而非字符串；否则拼接时会带多余引号："to bottom"→ 浏览器忽略整条规则 - 颜色列表用
$colors接收任意长度，支持#f00、rgba(0,0,0,0.3)、color-mix(in srgb, #f00, #00f)等原生格式，不强制解析 - 透明度交给输入色自己控制，函数不做
alpha参数——避免在函数内做颜色解构，也防止覆盖原始精度 - 示例：
@function gradient-value($direction: to bottom, $colors...) { @return "linear-gradient(#{$direction}, #{$colors})"; } .foo { mask-image: #{gradient-value(to right, #f00, #00f)}; background-image: #{gradient-value(45deg, #3498db, #e74c3c)}; }
fallback 和 CSS 变量共存时的分层输出
SCSS 编译期不知道 var(--grad) 运行时是否有效，所以不能靠 @if 判断“自动 fallback”。必须手动分层写：
- 先输出静态 fallback：
background-image: linear-gradient(to bottom, #3498db, #e74c3c); - 再覆盖为变量：
background-image: var(--grad, linear-gradient(to bottom, #3498db, #e74c3c)); - 如果想让函数返回带 fallback 的完整声明，得另写一个
@function gradient-with-fallback(...)，内部拼接字符串，但注意引号嵌套和转义
Safari 渲染模糊问题要提前防
某些 Safari 版本对含小数角度（如 45.5deg）或高饱和多色渐变渲染模糊，这不是编译问题，而是渲染引擎限制。解决方案只有两个：
- 角度统一取整：
round($angle)再传入 - 多色停点避开
12.34%这类非整数，改用12%或13% - 不要指望函数里加 hack 修复——这是浏览器行为，SCSS 无能为力
background？mask？paint()？），以及运行时环境是否支持它。函数只是把人眼可见的渐变逻辑翻译成浏览器能吃的一串字符，中间没魔法，全是约束。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
