浏览器只渲染第一段是因为多个 linear-gradient() 并列写入 background 会层叠覆盖而非合并；正确做法是用 $stops... 参数展开语法在单个函数内动态生成 color-stop 序列。
用 @each 遍历颜色列表生成多段线性渐变时，为什么浏览器只渲染第一段？
因为 CSS 的 linear-gradient() 不接受“拼接式”写法，直接把多个 linear-gradient() 并列放进 background 会触发层叠覆盖（后写的盖住前写的），而不是合并成一条渐变。真正要的是单个函数内动态生成 color-stop 序列。
正确做法是用 Sass 列表 + @for 或 @each 构建 stop 值序列，再用 join() 拼成参数列表传给 linear-gradient()：
$colors: #ff6b6b, #4ecdc4, #44b5b1, #feca57;
$stops: ();
@for $i from 1 through length($colors) {
$pos: percentage(($i - 1) / (length($colors) - 1));
$stops: join($stops, nth($colors, $i) $pos);
}
.example {
background: linear-gradient(to right, $stops...);
}注意末尾的 $stops... —— 这个 ... 是 Sass 的“参数展开”语法，缺了它就会把整个列表当做一个值传进去，导致编译报错 Invalid CSS after "...to right,": expected expression。
如何让渐变色停点支持非等距分布（比如按权重或自定义百分比）？
硬编码 percentage(($i - 1) / (length($colors) - 1)) 只适用于均匀分布。如果需要控制每段长度，就得把颜色和位置拆成两个平行列表，或用 map 存储键值对：
立即学习“前端免费学习笔记（深入）”；
$color-stops: (
#ff6b6b: 0%,
#4ecdc4: 30%,
#44b5b1: 75%,
#feca57: 100%
);
$gradient-args: ();
@each $color, $pos in $color-stops {
$gradient-args: join($gradient-args, $color $pos);
}
.gradient-custom {
background: linear-gradient(to bottom, $gradient-args...);
}这种写法更灵活，但要注意：map-keys() 和 map-values() 不能直接用于构造参数，必须显式遍历；另外，Sass 不校验 stop 百分比是否递增，若顺序错乱（如 75% 出现在 30% 前），CSS 渲染结果不可预测，调试时得靠浏览器 DevTools 的 computed 样式反查。
在 @function 中封装渐变生成逻辑，为什么调用时报 “Function finished without @return”？
这是 Sass 函数的硬性要求：所有执行路径都必须有 @return，包括条件分支里。常见翻车点是忘了在 @if 的 @else 分支里也写 @return，或者误把 background: 这类声明写进函数体。
一个安全的渐变生成函数模板：
@function make-gradient($colors, $direction: to right) {
@if length($colors) < 2 {
@error "At least 2 colors required for gradient";
}
$stops: ();
@for $i from 1 through length($colors) {
$pos: percentage(($i - 1) / (length($colors) - 1));
$stops: join($stops, nth($colors, $i) $pos);
}
@return linear-gradient($direction, $stops...);
}
// 使用
.element {
background: make-gradient((#a8e6cf, #ffd3b6, #ffaaa5));
}注意：函数只能返回值（如颜色、字符串、函数调用），不能包含 CSS 声明；linear-gradient(...) 在函数中是合法返回值，Sass 会把它原样输出到 CSS，但别试图在里面加 background:。
导出 CSS 变量版渐变时，为何 :root 里定义的 --grad 后续无法被 background: var(--grad) 正确解析？
CSS 变量不支持直接存函数调用结果，--grad: linear-gradient(...) 看似可行，但一旦涉及 Sass 计算（比如动态 stop 位置），就必须在编译期完成，而 CSS 变量是运行时才读取的——两者不在同一阶段。
可行方案只有两种：
- 放弃 CSS 变量，用 Sass mixin 封装（推荐）：
@mixin bg-gradient($colors, $dir: to right) { $stops: (); @for $i from 1 through length($colors) { $pos: percentage(($i - 1) / (length($colors) - 1)); $stops: join($stops, nth($colors, $i) $pos); } background: linear-gradient($dir, $stops...); } .test { @include bg-gradient((#3498db, #2ecc71)); } - 若真需变量，只能手写固定值（无动态计算）：
:root { --grad: linear-gradient(45deg, #3498db, #2ecc71); }，然后background: var(--grad)—— 但这已脱离“动态生成”范畴。
最常被忽略的一点：渐变函数里的角度或方向（如 45deg、to bottom right）若参与计算，必须确保单位一致；混用无单位数字和 deg 会导致 Sass 编译失败，错误信息通常是 Incompatible units。
