无需登录 数据私有 本地保存

CSS 自定义属性演练场 - 动态修改 var() 看效果

CSS 开发工具 CSS 变量 自定义属性
15
0
0
0
✅ CSS 代码已复制到剪贴板

CSS 自定义属性演练场

预设主题：
变量名以 -- 开头，如 --my-color。添加后变量会出现在下方列表并可实时编辑。

变量编辑 10

实时修改 ↓
修改任意变量，右侧预览实时响应

实时预览

过渡动画展示中
卡片标题

这是一张示例卡片，展示了CSS变量的综合应用效果。修改左侧的颜色、间距、圆角、阴影等变量，观察卡片的变化。

标签 CSS变量
正文文本 Aa 标题文本 Aa 强调文本

生成的CSS代码 

:root {
  --primary-color: #4f46e5;
  --secondary-color: #10b981;
  --bg-color: #f8fafc;
  --text-color: #1e293b;
  --border-color: #e2e8f0;
  --font-size-base: 16px;
  --heading-font-size: 24px;
  --spacing-unit: 8px;
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
复制以上代码到你的 :root 中即可使用这些CSS变量。

常见问题与知识点

CSS自定义属性（Custom Properties），常被称为CSS变量，是以 -- 开头的属性名，通过 var() 函数引用。它们定义在CSS规则中，遵循层叠和继承规则，可以在运行时通过JavaScript动态修改，极大提升了样式管理的灵活性和可维护性。例如：--main-color: #4f46e5; 定义一个变量，使用时 color: var(--main-color);。

核心区别在于运行时vs编译时。Sass/Less变量在编译阶段就被替换为固定值，浏览器无法感知变量的存在。CSS自定义属性是原生的浏览器特性，在运行时动态解析，可以通过JavaScript修改，支持继承和层叠，并且可以在媒体查询中重新定义。CSS变量更适合主题切换、响应式设计和动态样式场景；预处理器变量则适合构建时的常量管理。

var() 函数接受两个参数：var(--变量名, 后备值)。当CSS变量未定义或无效时，浏览器会使用后备值。例如：color: var(--unknown-color, #333); 如果 --unknown-color 不存在，则使用 #333。后备值本身也可以嵌套 var()，如 var(--a, var(--b, red))，提供多层兜底。

使用 element.style.setProperty('--var-name', value) 设置变量，使用 getComputedStyle(element).getPropertyValue('--var-name') 读取变量。在 :root 上设置可实现全局修改：document.documentElement.style.setProperty('--primary-color', '#ff0000');。这正是本工具的实现原理——修改变量值后，所有引用该变量的元素自动更新。

CSS变量遵循标准的CSS层叠和继承机制。在 :root 中定义的变量全局可用；在特定选择器中定义的变量仅在该选择器及其后代中生效。例如，在 .card { --card-padding: 20px; } 中定义的变量只能在 .card 及其子元素中使用。子元素可以覆盖父级变量值，形成局部作用域。这种机制非常适合组件级别的样式隔离。

支持！CSS变量可以参与 transition 和 animation。当CSS变量的值改变时，如果该属性支持过渡（如颜色、尺寸、阴影等），浏览器会平滑过渡。例如本工具的预览区中，所有元素设置了 transition: all 0.25s ease，变量变化时你能看到流畅的过渡动画。但需注意，并非所有属性都能过渡（如display），且变量值的类型需要可插值。

CSS自定义属性在现代浏览器中得到了广泛支持，包括Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+，以及移动端的iOS Safari 9.3+和Android Chrome。覆盖了全球约97%以上的用户。IE 11不支持CSS变量（但已停止维护）。对于需要兼容旧浏览器的项目，可以使用PostCSS等工具在构建时将CSS变量替换为静态值。

常见场景包括：主题切换（亮色/暗色模式只需修改几个变量）、设计系统（统一管理颜色、间距、字体等设计令牌）、响应式布局（在媒体查询中修改变量值）、组件定制（通过变量暴露可配置的样式接口）、动态主题（结合JavaScript实现用户自定义配色）、减少重复代码（一处定义多处使用）。现代CSS框架如Tailwind CSS也大量使用CSS变量实现动态配置。
🔧 相关工具