不能用 @mixin 生成渐变背景类，因为 @mixin 是代码块注入器、不返回可复用值，而按钮工具类需在 background-image、mask-image 等多属性中复用同一渐变，必须由 @function 返回无引号的原生 CSS 字符串。
直接用 @function 生成渐变值，再配合 @each 批量输出按钮类，别用 @mixin 去塞 background-image ——它不能返回值，塞进 mask-image 或 border-image 就会静默失败。
为什么不能用 @mixin 生成渐变背景类？
@mixin 是代码块注入器，不返回可复用的 CSS 值；而按钮工具类常需在多个属性中复用同一渐变（比如同时用于 background-image 和 mask-image），这时必须靠 @function 返回无引号、可拼接的原生 CSS 字符串。
- 错误写法：
mask-image: @include gradient(to right, red, blue);→ 编译报错或静默忽略 - 正确分工：
@function gradient($dir, $stops)返回linear-gradient($dir, $stops)，供任意属性调用 - 工具类中若只写
background: linear-gradient(...)而不设background-color，旧版 Safari 可能渲染为纯黑或闪烁
如何用 @function 动态构建 color-stop 序列？
关键不是拼字符串，而是用 join() 构建参数列表，并用 $stops...（三个点）语法展开 —— 缺了 ...，Sass 会把整个列表当单个参数传给 linear-gradient()，报错 Invalid CSS after "to right,": expected expression。
- 颜色与位置必须成对出现，例如
#ff6b6b 0%, #4ecdc4 30% - 顺序必须递增，
75%出现在30%前会导致渲染不可预测，Sass 不校验，得靠 DevTools 的 computed 样式反查实际 stop 列表 - 均匀分布可用
percentage(($i - 1) / (length($colors) - 1))，但非等距必须用map显式配对，避免索引偏移
批量生成按钮类时，怎么控制 specificity 和覆盖逻辑？
工具类命名要和方向、色标解耦：方向类（如 .bg-gradient-to-r）只管 background-image 值，色值类（如 .from-blue-500、.to-purple-600）负责提供具体颜色，两者组合生效。这样比写死整条渐变更灵活，也避免 specificity 冲突。
- 所有渐变类必须显式声明
background-color，推荐设为起始色（如from-blue-500对应的色值），防止降级时透底或白屏 - 不要用复合
background简写覆盖 —— 它会清空background-image，导致渐变丢失；应单独写background-image+background-color - 若需完全透明（如蒙层），必须显式写
background-color: transparent，不能省略
真正难的不是写循环，是让每一对 color-stop 位置严格递增、让每个工具类的 background-color 与渐变逻辑对齐、以及在 mask-image 这类只吃图像值的地方，确保你传进去的是函数返回值而非 mixin 注入块 —— 这三点漏掉任一，调试时都会卡在 DevTools 里反复看 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
