CSS变量以--开头，需在:root等选择器中声明，用var()函数调用并支持回退值；可通过JS的setProperty动态修改、getPropertyValue读取；媒体查询中须重设变量而非仅引用；适合运行时主题切换等场景，非编译期静态配置。
如何在CSS中声明和使用--color-primary这类变量
CSS变量（又称自定义属性）必须以--开头，只能在选择器作用域内生效。最常用的是在:root里声明全局变量，这样整个文档都能访问。
声明示例：
:root {
--color-primary: #007bff;
--spacing-md: 1rem;
--border-radius-sm: 4px;
}使用时通过var()函数读取，支持回退值：
.btn {
background-color: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--border-radius-sm, 2px); /* 2px是回退值 */
}- 变量名区分大小写，
--Color-Primary和--color-primary是两个不同变量 - 不能直接在HTML的
style属性里写var(--x)，但可以写--x: value来设置变量 - 变量值不支持自动单位换算，
var(--spacing-md) * 2会报错，需用calc(var(--spacing-md) * 2)
如何用JavaScript动态修改--theme-mode切换深色/浅色主题
变量本质是CSS属性，所以能被JS读写——关键在于操作style对象或document.documentElement的style属性。
立即学习“前端免费学习笔记（深入）”；
切换主题的典型写法：
function setTheme(mode) {
document.documentElement.style.setProperty('--theme-mode', mode);
// 同时可触发类名变更用于后备样式
document.documentElement.classList.toggle('dark', mode === 'dark');
}注意：setProperty只影响内联样式层，优先级高于外部CSS文件中的同名变量声明。
- 不要用
element.style.--theme-mode = 'dark'，这是语法错误 - 读取变量要用
getComputedStyle+getPropertyValue，例如getComputedStyle(document.documentElement).getPropertyValue('--theme-mode') - 动画无法直接过渡CSS变量（如
transition: --color-primary 0.3s无效），需配合@property注册（仅Chrome 110+支持）
为什么var(--size)在@media中不随断点实时更新
CSS变量本身是静态解析的，@media块里的var()不会“监听”变量变化；它只是在样式计算时取当前值。真正的问题常出在作用域和覆盖时机上。
常见误写：
:root { --size: 16px; }
@media (max-width: 768px) {
:root { --size: 14px; } /* ✅ 正确：重设根变量 */
}
.text { font-size: var(--size); }但下面这种就无效：
.text { font-size: var(--size); }
@media (max-width: 768px) {
.text { font-size: var(--size); } /* ❌ 没有重设--size，只是重复引用 */
}- 媒体查询中必须重新声明变量（如
:root或目标元素），不能只靠var()调用 - 变量作用域遵循CSS继承规则，子元素无法修改父元素定义的
:root变量，只能覆盖自己的 - 构建工具（如PostCSS）可能提前展开
var()，导致媒体查询失效，需确认是否禁用了相关插件
哪些场景下不该用CSS变量替代预处理器变量
CSS变量适合运行时可变、需JS交互或主题切换的值；但对编译期确定、无动态需求的配置，用Sass/Less变量更安全高效。
不推荐用CSS变量的典型情况：
- 需要在
@keyframes中做数值计算（如transform: translateX(calc(var(--offset) * 2))在部分浏览器动画中不稳定） - 作为
grid-template-columns中重复轨道（如repeat(3, var(--col-width))，IE完全不支持，且Safari旧版解析异常） - 大量嵌套
var()叠加（如var(--a, var(--b, var(--c)))），可读性差，调试困难 - 服务端渲染页面首次加载时需保证样式立即生效，而CSS变量依赖DOM解析顺序，存在FOUC风险
真正灵活的地方在于「一个变量控制多个属性」，比如改--accent-hue就能联动更新hsl(var(--accent-hue), 80%, 60%)和hsl(var(--accent-hue), 80%, 40%)，这种耦合关系才是变量价值所在。
