真正简化渐变流程的是@function和@mixin：变量存渐变会因引号导致静默失效，@function返回无引号css值用于mask-image等属性，@mixin输出完整声明块；多层渐变需注意绘制顺序与透明度控制。
直接用 radial-gradient() 或 linear-gradient() 写多处渐变，很快会失控——颜色改一处、位置调一遍、fallback 忘加、Safari 渲染模糊、mask-image 里还不能复用。真正能简化流程的不是变量，而是封装逻辑的 @function 和分层控制的 @mixin。
为什么 Sass 变量存不了渐变值
Sass 变量（如 $grad: "radial-gradient(circle, red, blue)";）存的是字符串，插进 background-image: #{$grad}; 后编译出来带引号：background-image: "radial-gradient(...)";，浏览器直接忽略整条规则，且不报错，静默失效。
- 必须用
@function返回无引号的 CSS 值，例如@return radial-gradient(circle at center, $a, $b); -
@mixin适合输出完整声明块，比如@include bg-radial($red, $blue);编译为background-image: radial-gradient(); - 若要用在
mask-image或border-image这类只接受图像值的属性上，只能靠@function；@mixin完全无法复用
怎么用 @function 封装径向渐变
统一默认行为：圆形、居中、farthest-corner 避免截断，支持任意长度颜色列表和可选位置参数：
@function radial($colors, $shape: circle, $pos: center, $size: farthest-corner) {
@return radial-gradient(#{$shape} #{$size} at #{$pos}, $colors);
}
- 调用时
background-image: radial(#ff9a9e, #fad0c4);→ 编译为background-image: radial-gradient(circle farthest-corner at center, #ff9a9e, #fad0c4); - 不传
$pos默认center，避免响应式下因transform或direction: rtl导致中心偏移 -
$size: farthest-corner是全背景推荐值；按钮光晕等小范围场景可显式传closest-side - 颜色列表支持停点写法，如
red 10%，函数原生接收，无需额外解析
多个渐变叠加时顺序和透明度怎么控
多个 radial-gradient() 用逗号拼接时，绘制顺序从后往前，且透明部分会透出下一层——这点常被忽略，导致本想做「光斑叠加」却变成「颜色混杂」。
- 写法示例：
background-image: radial(red 0%, rgba(255,0,0,0.2) 100%, transparent 100%), radial(circle at top left, #fff, #eee); - 注意：后写的渐变在上层，前写的在下层；
transparent不是“空”，而是允许下层透出 - 调试时打开 DevTools 的 Computed 样式，看实际生效的 layer 顺序，别只信源码书写顺序
- 如果某层需要完全遮盖，确保其最外圈色值不透明，或用
rgba(0,0,0,1)替代transparent
线性渐变怎么动态生成 color-stop 序列
直接把多个 linear-gradient() 并列放进 background 会层叠覆盖，而非合并成一条渐变。真正要的是单个函数内动态生成 color-stop 序列。
- 均匀分布：用
@for循环 +percentage(($i - 1) / (length($colors) - 1))算位置，再用join()拼参数列表 - 非等距分布：用
map存键值对（如#ff6b6b: 0%, #4ecdc4: 30%），遍历构造$gradient-args，最后传给linear-gradient(to right, $gradient-args...) - 关键细节：
$gradient-args后必须加...（Sass 参数展开语法），否则整个列表被当做一个值，编译报错Invalid CSS after "to right,": expected expression - Sass 不校验 stop 百分比是否递增，若顺序错乱（如
75%出现在30%前），CSS 渲染结果不可预测
最易被忽略的点：@function 所有分支都必须有 @return，哪怕只是 @return null；漏掉就会报 “Function finished without @return” —— 这不是警告，是编译中断错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
