跨页面css变量统一需将定义集中于独立variables.css文件并用link引入，禁用@import；主题切换应通过html class控制而非@media内重定义；注意作用域、回退值类型、js单位及safari兼容性。
如何在多个HTML页面中复用同一组颜色和间距值
靠复制粘贴 :root 块到每个文件里，看着统一，实则一改全崩。真正可靠的跨页面样式统一，得把变量定义和使用拆开：定义只写一次，所有页面通过 @import 或外部链接加载同一份 CSS 变量源文件。
常见错误是直接在每个 HTML 的 <style></style> 里重复写 :root { --color-primary: #007bff; }——变量名稍有拼写差异（比如 --color-prime），后续组件就悄无声息地回退到浏览器默认值，极难排查。
- 把所有变量集中写进一个
variables.css文件，仅含:root块，不写任何选择器或规则 - 在每个 HTML 页面的
中用<link rel="stylesheet" href="css/variables.css">加载（不要用@import在其他 CSS 里导入，它会阻塞渲染） - 确保该文件 HTTP 响应头包含
Cache-Control: public, max-age=31536000，避免每次重请求
为什么 :root 里的变量不能写在 @media 里动态切换主题
:root 本身支持媒体查询，但问题出在「级联时机」：如果在 @media (prefers-color-scheme: dark) 内重定义 --bg-color，旧值仍可能被已解析的样式规则缓存，尤其在页面首次加载时未触发重绘。
更稳的做法是给 添加 class，比如 ，然后用 .theme-dark :root 覆盖变量：
/* variables.css */
:root {
--bg-color: #fff;
--text-color: #333;
}
<p>.theme-dark :root {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
}</p>
- 切换主题时只需
document.documentElement.classList.toggle('theme-dark')，无需重载 CSS - 避免在
@media内直接修改:root，部分旧版 Safari 对这种写法支持不稳定 - 变量值尽量用
hsl()或color-mix()（如支持）做明暗推导，减少硬编码数量
CSS变量传值失败的三个典型场景
变量看似定义了，但 background-color: var(--bg-color) 渲染成透明——不是语法错，而是作用域或继承链断了。
-
父元素未继承变量：自定义属性默认不继承，但
:root是全局作用域，所以只要没被子级:root覆盖，就始终有效；但如果在某个div上写了div { --bg-color: red; }，其子元素能用，但兄弟元素不能 -
var() 回退值写错类型：比如
color: var(--text-color, 0);，0不是合法颜色，浏览器会忽略整个声明；回退值必须是目标属性可接受的语法，如var(--text-color, #666) -
JS 动态设置时漏掉单位：执行
document.documentElement.style.setProperty('--gap', 16)，实际生效的是--gap: 16（无单位），而margin: var(--gap)会失效；必须写'16px'或16 + 'px'
用 JS 读写 CSS 变量要注意的兼容性边界
IE 完全不支持 var() 和 getPropertyValue() 读取 :root 变量，但现代项目通常已放弃 IE。真正容易踩坑的是 Safari 15.4 之前的版本：它支持 setProperty()，但对带空格或连字符的变量名解析异常。
- 读取变量一律用
getComputedStyle(document.documentElement).getPropertyValue('--color-primary')，别用style对象直取（它只返回内联样式里设的值） - 变量名避免下划线，全部用短横线分隔，如
--font-size-base，Safari 对--font_size_base解析不可靠 - 批量设置多个变量时，用单次
style.cssText += '...'比循环setProperty()性能更好，尤其动画帧内频繁调用
CSS 变量的跨页面统一，本质是「定义位置」和「消费时机」的配合。最常被忽略的点是：变量文件是否真的被所有页面以相同路径、相同缓存策略加载——哪怕只差一个 ./ 和 /，就可能加载到旧版或 404 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
