PostCSS插件比手写Sass函数更可靠：postcss-color-function和postcss-hexrgba能正确处理#rgb/#rrggbb、自动转RGBA并降级，但需禁用preserve、不支持运行时变量；Sass手动实现易出错，须严格标准化输入并校验位数。
PostCSS插件比手写Sass函数更可靠
别在Sass里写@function hex-to-rgba这种函数——它无法处理#abc简写、不校验输入、不降级透明度，编译时出错还难定位。PostCSS生态已有成熟方案：postcss-color-function或postcss-hexrgba，它们在构建阶段就把color(#ff6b6b a(30%))转成rgba(255, 107, 107, 0.3)，且自动兼容#rgb和#rrggbb格式。
关键点：
- 必须启用
postcss-color-function的preserve选项为false，否则保留原函数写法，起不到降级作用 -
postcss-hexrgba能识别#ff6b6b4d并转为rgba(255,107,107,0.3)，但对#f004d（4位）直接报错，不尝试扩展 - 两者都不处理运行时变量，比如
color($primary a($alpha))中$alpha是Sass变量时，必须确保它在编译期已知值
Sass中手动转换HEX→RGBA必须先标准化输入
如果你非得用Sass函数，str-slice和str-length不是万能的。输入#f00时，不双写成#ff0000就直接切分，会取到f0和0，导致绿色通道只有0而不是00，最终rgba(255, 0, 0, 0.3)变成rgba(255, 0, 0, 0.3)看似一样，但#f0080这种非法输入会被静默转成错误颜色。
安全做法：
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 用
str-length($hex) == 4判断是否为#rgb简写，然后str-slice($hex, 1, 1)取#，再拼#{str-slice($hex, 2, 2)}#{str-slice($hex, 2, 2)}#{str-slice($hex, 3, 3)}#{str-slice($hex, 3, 3)}#{str-slice($hex, 4, 4)}#{str-slice($hex, 4, 4)} - 透明度参数必须用
if($alpha 兜底，防止<code>100%传进来被percentage()转成100而非1 - 返回前强制
to-lower-case，避免某些压缩工具把FF当变量名误删
为什么不能直接用8位HEX作为“兼容方案”
#ff6b6b4d不是向后兼容的写法，它是向前演进的语法。Chrome 119+、Firefox 117+支持，但Electron 22（基于Chromium 108）、微信iOS WebView（WKWebView 16.x）、大部分Android 10以下系统WebView仍会忽略最后两位，渲染成#ff6b6b纯色——这比透明失效更糟，因为视觉上完全看不出问题，直到测试发现按钮点击区域异常。
真正需要兼容的场景下：
- 绝对不要在
background或color里单独写#rrggbbaa，必须配rgba()fallback：例如background: rgba(255, 107, 107, 0.3); background: #ff6b6b4d; - CSS-in-JS库如
styled-componentsv6+默认不解析8位HEX，会原样输出，浏览器忽略，结果是无背景色 - PostCSS插件若未开启
disableHexAlpha，可能把#ff6b6b4d当作无效值丢弃，连fallback都不留
构建时转换比运行时更可控
JS里调hexToRgba('#ff6b6b', 0.3)听起来灵活，但实际埋雷：输入可能是null、"#ff6b6b "带空格、"rgb(255,107,107)"混入，而这些在构建阶段就能被PostCSS捕获并报错。更重要的是，CSS自定义属性（--primary: #ff6b6b;）无法在JS里动态注入alpha，除非你用document.documentElement.style.setProperty，但这绕过了CSS层叠和继承逻辑。
推荐路径：
- 主题配置用JSON存原始HEX，如
{"primary": "#ff6b6b"} - 构建时用
vite-plugin-css-vars或webpack DefinePlugin注入--primary-30: rgba(255, 107, 107, 0.3) - CSS中直接用
color: var(--primary-30)，无需运行时计算
最易被忽略的是设计师给的#ff6b6b4d在Figma里导出时，常被当成“已含透明度的颜色”，但开发拿到后若直接塞进CSS，旧环境就失效——得先剥离后两位，再走标准转换流程。
