与预处理器变量（Sass 的 $var）本质不同：CSS 变量是浏览器原生、运行时求值、可被 JS 读写（getComputedStyle），并且遵循层叠与继承——在 :root 声明则全站可用，在 .dark 容器里重新赋值则只影响该分支。
它是暗色模式、主题切换、组件库设计令牌的事实标准：切换主题只改一组变量，所有引用处自动生效，无需重新编译 CSS。var() 还能给 fallback：var(--gap, 12px)。
<style> :root { --primary: #4a9eff; --radius: 10px; --pad: 12px; } .dark { --primary: #a371f7; } /* 换主题 = 换变量 */ .btn { background: var(--primary); color:#fff; border:0; padding: var(--pad) 20px; border-radius: var(--radius); cursor:pointer; transition: filter .2s; } .btn:hover { filter: brightness(1.15); } </style> <button class="btn">默认主题按钮</button> <div class="dark" style="padding:8px;"><button class="btn">dark 容器内按钮</button></div>