必须用@function而非@mixin，因@mixin仅输出声明块而@function返回可赋值的css图像值，才能用于mask-image、border-image等需值的属性；若误用@mixin会导致语法错误且无法复用。
直接用 @function 封装 linear-gradient，别用 @mixin —— 否则无法在 mask-image、border-image 等需要“值”的地方复用。
为什么必须用 @function 而不是 @mixin
因为 @mixin 只能输出声明块（比如整行 background-image: ...），而 @function 返回的是可赋值的 CSS 值。一旦你写成 mask-image: gradient(...) 或 filter: drop-shadow(...)，@mixin 就完全失效——语法报错，浏览器不认。
-
@function gradient($direction, $colors) { @return linear-gradient($direction, $colors); }是合法且通用的 -
@mixin gradient($a, $b) { background-image: linear-gradient($a, $b); }只能用于生成样式规则，不能当值传 - 调用
@include gradient(...)时，它不返回任何东西，所以mask-image: @include ...是语法错误
linear-gradient 函数怎么支持多色和位置控制
原生 linear-gradient(to right, red 0%, yellow 50%, green 100%) 中的位置信息（如 50%）必须由调用方显式传入，函数内部不能自动推断间隔。强行在函数里做百分比计算会牺牲灵活性，也容易出错。
- 推荐做法：让调用者传带位置的颜色列表，例如
$colors: (red 0%, yellow 50%, green 100%) - SCSS 的
@each可以遍历这个列表并拼接，但注意：不要手动拼字符串（如"linear-gradient(#{$d}, #{$c})"），那会破坏类型检查和编译时验证 - 方向统一用关键词（
to bottom）而非角度（90deg），避免混用导致调试混乱 - 透明度靠传
rgba()或hsla()实现，不单独设$alpha参数——更可控，也避免函数内解析颜色值的复杂逻辑
渐变背景加 transition 为什么不动？怎么让它“动”起来
CSS 规范明确将 background-image（含所有渐变函数）标记为 不可动画化属性。哪怕你写了 transition: background .3s，浏览器也无法插值两个不同 linear-gradient 之间的中间状态，结果就是跳变或无反应。
- 真实可行的方案是伪元素叠加 +
opacity切换：::before放默认渐变（opacity: 1），::after放悬停渐变（opacity: 0） -
:hover时交换两者opacity，再给opacity加transition，视觉上就是平滑过渡 - 注意
z-index和position: relative配合，确保伪元素不遮挡可点击内容
最易被忽略的一点：函数返回的渐变值只能用于接受图像值的属性（background-image、mask-image、border-image），不能直接塞进 color 或 background-color —— 类型不匹配，编译会警告或静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
