Sass 1.80+ 原生支持 rgb(255 0 0 / 0.5) 等现代 CSS 颜色语法，但编译不校验兼容性，若目标浏览器不支持（如旧版 Safari）或混用逗号与空格（如 rgb(255, 0 0 / 0.5)），会导致整条声明失效；hwb() 要求严格单位（如 hwb(120 20% 30%)），而 hsl() 单位更宽松；所有新函数禁用逗号分隔，且字符串拼接（如 #{...}）会丢失颜色类型安全。
直接用 rgb()、hsl() 等函数传空格分隔值 + 斜杠语法即可，无需额外配置。Sass 1.80+ 原生支持现代 CSS 颜色语法，但编译行为和浏览器解析逻辑必须对齐，否则会产出无效 CSS。
为什么 rgb(255 0 0 / 0.5) 编译后可能失效
Sass 本身不校验颜色值是否合法，它只是把表达式原样输出到 CSS；真正报错的是浏览器。常见失效场景：
- 你在 Sass 中写了
rgb(255 0 0 / 0.5)，但目标浏览器（如旧版 Safari 或某些 WebView）不支持斜杠语法——Sass 不会降级，也不会警告 - 你混用了空格和逗号：
rgb(255, 0 0 / 0.5)，Sass 能编译，但浏览器直接拒绝解析整条声明 - 你把变量拼进字符串里：
#{'rgb(' + $r + ' ' + $g + ' ' + $b + ' / 0.5)'}，这会绕过 Sass 的颜色类型检查，输出不可靠的值
hsl() 和 hwb() 在 Sass 中的单位处理差异
Sass 1.80+ 对 hsl() 的单位更宽松，但 hwb() 等新函数仍要求严格格式：
-
hsl(240 100% 50%)、hsl(240deg 100 50)、hsl(240 100% 50)全部合法，Sass 会保留原写法输出 -
hwb(120 20% 30%)必须带百分号，写成hwb(120 20 30)会被 Sass 当作语法错误（Sass 解析器认为第三参数缺单位） - 所有现代颜色函数都不接受逗号分隔，
hsl(240, 100%, 50%)在 Sass 1.80+ 中已标记为“deprecated”，编译时会发 warning，但不中断
如何让 Sass 输出兼容 IE11 的 fallback（如果真需要）
现代 CSS 颜色函数本身不提供降级能力，Sass 也不内置自动 fallback。你得手动控制：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
transparentize()生成rgba()——它在 Sass 1.80+ 中仍输出rgba()，但新版rgb(r g b / a)更推荐 - 若必须兼容 IE11，用双声明 +
/* stylelint-disable */注释绕过 lint 报错：color: rgba(255, 0, 0, 0.5);<br>color: rgb(255 0 0 / 0.5);
- 避免在同一个属性里混用两种语法做“渐进增强”，比如先写
color: #f00;再写color: rgb(255 0 0 / 0.5);——IE11 会忽略第二条，但其他浏览器会覆盖第一条，逻辑反而混乱
最易被忽略的一点：Sass 编译器不关心你用的是 rgb() 还是 hsl()，但它严格区分「颜色类型」和「字符串」。一旦你把颜色转成字符串再拼接（哪怕只用了一次 #{}），就彻底失去类型安全，后续所有颜色函数（darken()、mix()）都会拒绝处理。保持输入是 color 类型，比纠结语法细节重要得多。
