dart sass对颜色语法更严格，会拒绝rgb()/rgba()中非整数、超范围或混用单位，不支持八位十六进制颜色，且要求hsl()中饱和度和亮度必须带%单位。
LibSass 已于 2021 年终止维护，迁移到 Dart Sass 后，CSS 颜色值出现变化，不是浏览器渲染问题，而是编译阶段就发生了隐式转换或校验收紧——Dart Sass 对颜色语法更严格，会拒绝旧版 LibSass 宽松接受的非法写法，并静默修正部分边界值。
rgb() / rgba() 中非整数、超范围或混用单位被拒绝
Dart Sass 不再容忍 rgb(255.5, 128, 64)、rgba(0, 0, 0, 100%) 或 rgb(100%, 200, 50%) 这类混合单位/越界值。LibSass 曾尝试“容错解析”，比如把 256 截断为 255，而 Dart Sass 直接报错并中断编译（或在某些构建工具中静默跳过该声明）。
- 立即检查所有
rgb()和rgba()调用：确保每个通道是0–255整数，或统一用0%–100%；alpha 必须是0–1小数 - 避免在 Sass 中拼接字符串生成颜色，如
"rgb(#{$r}, #{$g}, #{$b})"—— 这绕过类型校验，但输出后可能被 CSS 引擎拒绝 - 用
color.adjust()或scale-color()替代手动计算，它们返回合法颜色值
#rrggbbAA 八位十六进制颜色被忽略或转义
LibSass 对 #ff000080（带 alpha 的八位 hex）支持不一致，有些版本保留原样，有些转成 rgba(255, 0, 0, 0.5)；Dart Sass 默认不识别八位 hex，除非启用 postcss-color-hex-alpha 等 PostCSS 插件，否则直接当无效值丢弃。
- 确认构建流程中是否已接入
postcss-color-hex-alpha（需在 PostCSS 配置里显式添加） - 更稳妥的做法：在 Sass 中改用
rgba($color, $alpha)，例如rgba(#ff0000, 0.5)，由 Sass 编译为标准rgba() - 若必须用八位 hex，请确保它只出现在纯 CSS 文件（非 .scss），且构建链路明确支持（如 Vite 的
css.postcss配置）
hsl() 中缺失 % 单位或非法单位导致整条规则失效
LibSass 对 hsl(120, 80, 60)（饱和度/亮度缺 %）有时能“猜对”并输出 hsl(120, 80%, 60%)；Dart Sass 严格要求 s 和 l 参数带 %，否则编译失败或输出无效 CSS（浏览器静默忽略）。
- 全局搜索项目中所有
hsl(和hsla()，补全%：把hsl(120, 80, 60)改成hsl(120, 80%, 60%) -
h（色相）可省略单位（默认deg），但禁止使用px、em等非法单位，如hsl(360px, 100%, 50%)在 Dart Sass 中直接报错 - 使用
lighten()、darken()等函数替代手写 hsl 值，更安全
变量引用中嵌套 var() 导致颜色丢失
LibSass 编译时可能把 color: rgba(var(--r), var(--g), var(--b), 1); 当作普通字符串输出，而 Dart Sass 会尝试解析，发现嵌套 var() 不合法（CSS 规范不支持），于是整个声明被丢弃——你在 DevTools 的 Styles 面板里看不到这一行。
- 禁止在 Sass 中写
rgba(var(--r), ...)类型表达式；CSS 变量应在纯 CSS 层使用，Sass 变量应在编译期求值 - 如果需要动态颜色组合，用 Sass 变量 + 函数：定义
$primary-rgb: rgb(59, 130, 246);，再用rgba($primary-rgb, 0.8) - 若必须依赖运行时 CSS 变量，请拆分为两层：先用
:root { --primary-rgb: "59, 130, 246"; }，再在 CSS 中写color: rgb(var(--primary-rgb));（注意引号和语法限制）
最易被忽略的是：Dart Sass 的错误提示常被构建工具吞掉，尤其在 Webpack/Vite 的 watch 模式下。务必打开终端日志，搜索 “Error: Invalid value” 或 “SassError”，而不是只盯着浏览器表现——很多颜色变化，根源在编译环节就被截断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
