Sass变量无法直接存储radial-gradient()字符串，因其会编译为带引号的无效CSS；必须用@function返回无引号CSS值，并配合@mixin生成完整声明，以确保在background-image、mask-image等属性中正确复用。
直接用 radial-gradient() 写多参数渐变，容易漏掉 circle 或写错 at center 位置，导致在非正方形容器里中心偏移、颜色被拉伸；Sass 变量本身不能简化语法，真正管用的是 @function 封装渐变值，配合 @mixin 生成带 fallback 的完整声明。
为什么不能只靠 Sass 变量存 radial-gradient() 字符串
Sass 变量（如 $grad: "radial-gradient(circle, red, blue)";）存的是字符串，一旦插进 background: #{$grad};，编译后就是带引号的无效 CSS，浏览器直接忽略整条规则。这不是语法错误，而是运行时静默失效。
- 必须用
@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...);
}
调用示例：
立即学习“前端免费学习笔记（深入）”；
.card {
background-image: radial(#ff9a9e, #fad0c4);
// 编译为：background-image: radial-gradient(circle farthest-corner at center, #ff9a9e, #fad0c4);
}
.btn {
background-image: radial(red 0%, rgba(255,0,0,0.2) 100%, transparent 100%, white 100%),
radial(circle at top left, #fff, #eee);
}
- 颜色列表用
$colors...接收，支持停点写法如red 10% - 不传
$pos时默认center，避免响应式下因transform或direction: rtl导致中心漂移 -
$size: farthest-corner是全背景推荐值；若做按钮光晕，可显式传closest-side
叠加多个径向渐变时的顺序与透明度陷阱
多个 radial-gradient() 用逗号拼接时，**绘制顺序从后往前**，且透明部分会透出下一层——这点常被忽略，导致本想做「光斑叠加」却变成「颜色混杂」。
- 第一层（最右）是底层，最后一层（最左）盖在最上面
- 用
transparent作终点色时，必须明确写单位，如transparent 100%，否则 Safari 会渲染模糊 - 避免写
radial-gradient(..., red, transparent)—— 默认停点不均，可能在 70% 就已全透明，中间留白 - 推荐写法：
radial-gradient(circle at center, rgba(255,0,0,0.3) 0%, transparent 70%)
真正难的不是写对一个渐变，而是当它嵌在 background 复合属性里、又要兼容旧浏览器、还要和 CSS 变量联动时，@function 的返回值是否能被正确插入到所有上下文——这需要你在每个调用点手动验证输出，而不是依赖 mixin 的“看起来正常”。
