SCSS无法运行时动态计算linear-gradient参数，只能在编译期用@function拼接字符串或@mixin生成静态CSS声明；真需运行时切换应使用CSS变量配合JS。
SCSS里不能直接用linear-gradient()函数动态计算角度或颜色
SCSS编译时就确定所有值，不支持运行时计算渐变参数。比如写@function calc-angle($base) { @return $base + 45deg; }再塞进linear-gradient(calc-angle(135deg), ...)——这会报错，因为linear-gradient()是CSS函数，不是SCSS函数，它不接受SCSS表达式作为参数。
真正能“动态生成”的，是SCSS在编译阶段拼出完整渐变声明字符串。关键不是算角度，而是把变量、逻辑、颜色组合提前编译成可用的CSS值。
用@function拼接完整linear-gradient()字符串
SCSS的@function可以返回字符串，配合#{}插值，就能生成合法的渐变声明。但要注意：返回值必须是纯字符串，且引号要匹配；浏览器最终看到的仍是静态CSS，只是生成过程更灵活。
- 必须用双引号包裹整个渐变声明，例如
"linear-gradient(to right, #ff6b6b, #4ecdc4)" - 颜色和方向需提前转为字符串，不能传
to right变量后直接拼，得写成"to right" - 多色停点要用
join($colors, ", ")合并，避免手动拼接漏空格 - 示例函数：
@function make-gradient($dir, $colors...) { $color-str: join($colors, ", "); @return "linear-gradient(#{$dir}, #{$color-str})"; } .gradient-box { background-image: #{make-gradient("to bottom", #fff, #e0e0e0)}; }
SCSS变量+@mixin比函数更实用
多数场景下，你并不需要“计算”，而是想复用渐变逻辑。这时候@mixin比@function更直观、易调试，也更容易对接主题系统。
立即学习“前端免费学习笔记（深入）”；
- 支持默认参数：
@mixin vertical-gradient($top: #fff, $bottom: #e0e0e0) - 可嵌套条件：
@if lightness($top) > 80 { ... }来自动调暗底部色 - 能直接输出属性，不用
#{}插值，减少引号/空格错误 - 和Vue/React组件内SCSS共用时，
@include比函数调用更符合直觉
别忽略编译后CSS体积和兼容性
每个@include或#{}调用都会生成一份独立的background-image声明。如果你用循环生成20种渐变变体，CSS文件会膨胀，且无法被浏览器缓存复用。
- IE11及更早版本不支持
linear-gradient()，需加-ms-linear-gradient前缀（现代项目通常已放弃） - 移动端Safari对
repeating-conic-gradient支持有限，动态边框类效果慎用 - 真需要运行时切换？别硬扛SCSS，交给CSS变量+JS控制
style.setProperty('--bg-gradient', ...)
最易被忽略的一点：SCSS生成的“动态”只是开发期便利，上线后就是固定CSS。想响应用户操作实时变色，必须切到CSS变量方案，而不是在SCSS里堆逻辑。
