css如何使用CSS变量提高样式灵活性_动态改变页面样式

P粉602998670

发布时间：2026-02-08 11:24:10

937人浏览过

来源于php中文网

原创

CSS变量以--开头，需在:root等选择器中声明，用var()函数调用并支持回退值；可通过JS的setProperty动态修改、getPropertyValue读取；媒体查询中须重设变量而非仅引用；适合运行时主题切换等场景，非编译期静态配置。

css如何使用css变量提高样式灵活性_动态改变页面样式

如何在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文件中的同名变量声明。

魔珐星云

无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

下载

不要用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风险