应使用 :root 定义语义化变量（如 --toast-bg-success），优先采用 hsl() 方便 calc() 微调，为每类提示配齐背景/文字/边框三组变量；注意作用域、加载顺序及 Shadow DOM 限制；动态更新需批量 setProperty 并触发重绘；IE 降级须前置静态值。
如何用 :root 定义全局提示框颜色变量
直接在根元素里声明一组语义化变量，比散落各处的 #ff6b35 或 hsl(12, 100%, 60%) 更可控。重点不是“能不能用”，而是变量名是否反映用途——比如 --toast-bg-success 比 --color-1 能扛住半年后的维护。
-
:root中定义，确保所有组件都能继承，不用重复!important覆盖 - 优先用
hsl()或lab()（如支持）而非十六进制，方便后续通过calc()微调明度或饱和度 - 为每个提示类型（
success、warning、error、info）配齐背景、文字、边框三组变量，避免漏掉--toast-border-color-error导致边框还是默认灰色
为什么 var(--toast-bg-warning) 在某些组件里不生效
常见现象是变量写了、也引入了，但提示框颜色还是没变——大概率是作用域或层叠问题。CSS 变量遵循继承和层叠规则，不是“写在哪都自动全局生效”。
- 检查是否被更高优先级选择器覆盖，比如
.toast.warning { background: #ffcc00; }会压过background: var(--toast-bg-warning); - 确认变量定义在使用前已加载，尤其用
@import引入 CSS 时，:root块必须在最前面，否则后面文件读不到 - 注意 Shadow DOM 场景：自定义元素内若未显式继承（
inherit: true）或未在:host中重申变量，子节点拿不到父级:root的值
动态切换主题时如何安全更新提示框颜色
改 document.documentElement.style.setProperty() 是最快方式，但容易误操作导致部分提示框卡在旧值上。关键是别只改变量，还得触发重绘边界。
- 批量更新用
Object.assign(document.documentElement.style, { ... })，比单个setProperty更少触发重排 - 避免在
transition过程中频繁改变量，特别是涉及background和color同时变时，可能让提示框闪一下旧色再跳新色 - 如果用 JS 控制暗色模式，记得同步设置
data-theme="dark"属性，并在 CSS 里用[data-theme="dark"] .toast { --toast-bg-error: #b33939; }做兜底，防止 JS 加载失败时样式全乱
IE 不支持 CSS 变量？提示框颜色降级方案怎么写
IE11 及更早版本完全忽略 var()，直接当无效声明处理。不能靠“用户不用 IE”回避——内部系统、政府项目真有这需求。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是“先写降级值，再写
var()”，例如：background-color: #e74c3c; background-color: var(--toast-bg-error);，IE 只认第一行 - 别用
@supports (color: var(--c))包裹整段 toast 样式——IE 不解析@supports，会导致整个块失效 - 如果项目已用 PostCSS，可用
postcss-css-variables插件静态展开变量，但注意它无法处理运行时 JS 动态 set 的值，仅适用于编译期确定的颜色
calc(var(--toast-hue-error) + 5) 微调”，而不是每次改稿都发新 HEX 值过来。 
