css color level 4 明确将 rgb()、hsl() 等函数的逗号分隔语法标记为 obsolete，仅支持空格分隔与 / 分隔 alpha；混用新旧语法会导致声明被忽略，且预处理器常默认输出过时格式。
rgb() 和 hsl() 里的逗号已经过时了
不是“推荐用空格”，而是 rgb()、hsl() 等函数的逗号写法在 CSS Color Level 4 中被明确定义为 obsolete（过时）。浏览器目前还能解析 rgb(255, 0, 0)，但这是解析器 fallback，不是规范支持。
真正麻烦的是：一旦你混用新旧语法，比如在同一条声明里写 color-mix(in srgb, red, rgb(255, 0, 0))，整个声明会被忽略——因为 color-mix() 完全不认逗号分隔的参数。
-
rgb(255, 0, 0, 0.5)是非法写法；必须写成rgb(255 0 0 / 0.5) -
hsl(240, 100%, 50%)虽然能显示，但加 alpha 时会静默失败（hsl(240, 100%, 50%, 0.5)无效） - 所有 Level 4 新函数（
oklch()、color-mix()、color-contrast()）只接受空格+斜杠语法
空格和斜杠不是排版习惯，是语法结构
rgb(255 0 0 / 0.5) 中的空格和 / 有明确语义：
- 空格是 参数分隔符，类似 JS 函数调用中参数之间的空格，
255、0、0是三个独立值 -
/是 alpha 命名参数引入符，不可省略、不可替换为逗号或额外空格 - 允许混合单位：
hsl(240 100% 50px)合法，但hsl(240, 100%, 50px)直接解析失败
误写成 rgb(255 0 0 0.5)（漏掉 /）会导致第四个值被忽略，透明度丢失，且无任何报错提示。
Sass/Less 和构建工具容易悄悄翻车
预处理器和构建链对空格语法的支持不一致，实际迁移中最常出问题的不是手写 CSS，而是自动化生成部分：
- Sass 中
rgb($r, $g, $b)默认输出逗号版；需改用插值rgb(#{$r} #{$g} #{$b})或升级 color 模块 - PostCSS 插件（如
postcss-color-function）若版本 - CSS 压缩器（如 cssnano）若未配置
css-color-adjust，可能合并多余空格导致rgb(255 0 0)变成rgb(255 0 0)（少空格），Safari 17.3 及更早版本会静默失败 - JS 动态设置样式时，
el.style.color = 'rgb(255 0 0)'在 Safari 17.3- 需先检测CSS.supports('color', 'rgb(0 0 0)')
团队协作时最危险的是语法混用
没人会故意写错，但多人协作中很容易出现「有人手写逗号、有人用工具输出空格、压缩器再一搅和」的局面。这种混合不会报错，但会导致：
- 深色模式下颜色意外变暗（alpha 未生效）
- 高对比度访问模式中文字不可读（透明度丢失）
-
color-mix()声明整条失效，背景/文字色突然回退到默认值
真正难处理的不是单个函数怎么写，而是当你要同时用 oklch(0.8 0.2 270) 和 color-mix(in oklab, #{$c1}, #{$c2}) 时，所有颜色值必须统一用空格语法——夹一个 rgba(255, 0, 0, 0.5)，整条规则就废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
