linear-gradient() 多色渐变必须用 $stops... 展开参数，直接拼字符串或并列写多个函数会导致层叠覆盖；正确做法是用 @function 动态生成 color-stop 序列，颜色与位置成对且递增，radial-gradient() 同样需 @function 封装避免引号污染。
linear-gradient() 多色参数必须用 $stops 展开，不能直接拼字符串
浏览器只渲染第一段渐变，是因为把多个 linear-gradient() 并列写进 background 会触发层叠覆盖——后写的盖住前写的，不是合并。真正要的是单个函数内动态生成 color-stop 序列。
常见错误是这样写：background: linear-gradient(to right, #f00, #0f0), linear-gradient(to right, #00f, #ff0); ——这其实是两层背景图叠加，第二层完全遮住第一层的视觉效果。
- 正确做法：用
@for或@each构建 stop 值列表，再用join()拼成参数序列 - 关键语法是末尾的
$stops...（三个点），这是 Sass 的参数展开，缺了就报错Invalid CSS after "to right,": expected expression - 颜色和位置必须成对出现，例如
#ff6b6b 0%, #4ecdc4 30%；顺序错乱（如 75% 出现在 30% 前）会导致渲染不可预测
非等距停点要用 map 存键值对，别硬编码 percentage 计算
写 percentage(($i - 1) / (length($colors) - 1)) 只适用于均匀分布。一旦需要控制某段更长、某段更短（比如品牌主色占 60%，辅助色各占 20%），就得拆开颜色与位置逻辑。
用 list 索引对齐容易偏移，尤其增删颜色时；map 显式命名字段更安全：
@function gradient-stops($color-stops) {
$args: ();
@each $color, $pos in $color-stops {
$args: join($args, $color $pos);
}
@return $args;
}
- 调用时传
(#ff6b6b: 0%, #4ecdc4: 30%, #44b5b1: 75%, #feca57: 100%) - Sass 不校验百分比是否递增，调试得靠 DevTools 查 computed 样式里的实际 stop 列表
- 避免用
map-keys()或map-values()直接拼参数——它们返回新 list，但不保证顺序稳定
@function 比 @mixin 更适合渐变值复用
@mixin 是代码注入器，不能返回值；把它用在 mask-image 或 border-image 这类只接受图像值的地方，会静默失效或编译报错。
错误写法：mask-image: @include gradient(to right, red, blue); → 编译不过
- 正确分工：
@function返回无引号 CSS 值（如@return linear-gradient($dir, $stops...)），供任意属性使用 -
@mixin只用于生成完整声明块，比如@mixin bg-gradient($dir, $colors)输出background-image: ... - 方向参数必须是 keyword（如
to bottom），不能传字符串"to bottom"，否则编译后带多余引号，浏览器忽略整条规则
radial-gradient() 必须用 @function 封装，Sass 变量存不了有效值
写 $grad: "radial-gradient(circle, red, blue)"; background: #{$grad}; 看似省事，但编译后是带引号的字符串，CSS 无效，浏览器静默丢弃。
真正起作用的是 @function 返回未加引号的原生 CSS 值：
@function radial($colors, $shape: circle, $pos: center, $size: farthest-corner) {
@return radial-gradient(#{$shape} #{$size} at #{$pos}, $colors);
}
- 默认
farthest-corner避免非正方形容器里渐变被截断 - 若用于
mask-image或border-image，@mixin完全无法替代@function - 圆角容器中用
radial-gradient要小心：若$pos不是center，且容器有border-radius，可能边缘溢出或拉伸失真
复杂点在于 stop 位置顺序和单位一致性——百分比必须严格递增，px/deg 等单位不能漏，且所有函数输出都得避开引号污染。这些细节不报错，但会让渐变在某个浏览器里突然消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
