scss无法在编译期将十六进制字符串如"#ff6b35"直接拆解为独立css变量--r、--g、--b，因其仅支持颜色对象（如$primary: #ff6b35）的red()等函数解析，且不支持运行时字符串解析；动态rgb分量需js配合解析并注入，或预定义主题色在scss中静态计算。
SCSS里不能直接把#ff6b35转成--r: 255这种CSS变量
SCSS编译时就结束了，它生成的是静态CSS，没法在运行时解析用户输入或动态颜色字符串。所以你写@function hex-to-rgb($hex) { ... }，只能在编译期把#ff6b35算成rgb(255, 107, 53)这种字符串值，无法拆成三个独立数字写进:root里的--r、--g、--b变量——那些变量得靠JS在浏览器里实时注入。
hex-to-rgb()函数只适合生成内联rgb()值，不是为CSS变量设计的
SCSS自带的red()、green()、blue()函数能从颜色值里取分量，但前提是输入必须是SCSS颜色对象（比如$primary: #ff6b35），不是字符串"#ff6b35"。如果你传字符串进去，会报错argument `$color` of `red()` must be a color。
- ✅ 正确用法：
$primary: #ff6b35; --r: #{red($primary)}; - ❌ 错误用法：
--r: #{red("#ff6b35")};—— 这会编译失败 - ⚠️ 注意：SCSS不支持运行时字符串解析，
str-slice()或to-number()对十六进制字符串无效
真要让CSS变量拿到RGB分量，得靠JS + SCSS协作
典型做法是：SCSS定义原始色值（如$primary: #ff6b35），JS读取这个值（通过getComputedStyle(document.documentElement).getPropertyValue('--primary')或直接引用SCSS导出的JSON），再解析、拆分、写入--primary-r等变量。
- SCSS中可导出颜色表：
:root { --primary: #{$primary}; } - JS里用
parseInt(hex.replace(/^#/, ''), 16)解析，自动兼容#rgb和#rrggbb - 别忘了补零逻辑：
#fff要先转成#ffffff再切分，否则parseInt("fff", 16) === 4095，不是255 - Safari不认
#rrggbbaa，所以哪怕你只想加透明度，也得拆RGB+alpha两组变量才稳
如果只是换肤且颜色固定，SCSS预计算+多套CSS变量更实际
比如主题色只有#4762FE、#3245D9、#C2D1FF三档，就别折腾运行时解析了。直接在SCSS里写死：
:root[data-theme="dark"] {
--primary-r: #{red(#4762FE)};
--primary-g: #{green(#4762FE)};
--primary-b: #{blue(#4762FE)};
--primary-alpha: 0.1;
}
这样既免JS，又保兼容，还能用rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha))安全使用。真正容易被忽略的是：一旦选了这套方案，所有主题切换就得靠class切换+CSS重载，没法靠单个--primary变量动态改全部衍生值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
