css变量必须声明在:root中才能全局生效，因其是唯一确保全文档继承、主题切换和响应式复用的原生方案；媒体查询重定义、js动态修改及calc()运算均需遵循此作用域规则。

它不是“锦上添花”的特性，而是解决主题切换、组件定制、响应式复用这三类高频问题的最小可行原生方案——没有它，就得靠 JS 拼字符串、引入 CSS-in-JS 库，或者退回 Sass 多套变量文件的手动维护时代。

var() 读不到值？先查作用域链

写完 --color-primary: #007bff 却渲染不出颜色，90% 是因为变量没声明在可继承的作用域里。浏览器不会自动“扫描全局”，必须显式挂载。

• :root 最安全：等价于 html 元素，所有元素默认继承
• 局部声明只对后代生效：比如在 .card 里写 --bg: #fff，那只有 .card 内部能用 var(--bg)
• 伪类中声明是合法的：例如 .btn:hover { --opacity: 0.8; }，但该变量仅在此状态下生效，且不触发重排——这是纯 CSS 实现暗色悬停的关键

JS 动态改主题，别直接赋值 style 对象

el.style.--foo = 'red' 是无效语法。CSS 自定义属性不能像普通 CSS 属性那样通过点号访问 style 对象。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 改全局变量：用 document.documentElement.style.setProperty('--text-color', '#1a1a1a')
• 改局部变量：用目标元素的 style.setProperty()，比如 headerEl.style.setProperty('--border-width', '2px')
• 读取值必须用 getComputedStyle(el).getPropertyValue('--foo')，注意返回值带首尾空格，要用 .trim()

媒体查询里重定义变量，必须写在 :root 下

想根据屏幕宽度动态调整 --gap 或 --font-size？别把变量塞进 @media 里的组件选择器里——那样会断掉继承链，后代拿不到新值。

• 正确写法：@media (min-width: 768px) { :root { --gap: 1.5rem; } }
• 错误写法：@media (min-width: 768px) { .container { --gap: 1.5rem; } } —— 此时 .container 子元素无法继承这个新值
• 变量值支持 calc()，但 var() 不能直接参与外部运算：写 width: var(--size) * 2 会报错，必须写成 width: calc(var(--size) * 2)

真正容易被忽略的，是变量值的“运行时计算”能力——它不像 Sass 那样编译期展开，而是在每次样式计算时实时求值，这意味着它能响应 JS 修改、媒体查询切换、甚至伪类状态变化，但同时也要求你始终关注继承路径和 calc() 的包裹规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！