创想星城

CSS 变量的学习笔记（--自定义属性）

2026-07-05 · 阅读 3 分钟

以前改一个网页的主题色，要把样式表里十几个颜色一个一个找出来改，特别容易漏。学到 CSS 变量以后才发现，这事儿可以简单很多。

基本用法

CSS 变量就是用两个短横线开头定义的属性，一般写在 :root 里，取值的时候用 var()：

:root {
  --main-color: #3a6ea5;
  --bg-color: #fafafa;
}

body {
  background: var(--bg-color);
  color: #333;
}

a {
  color: var(--main-color);
}

以后想换主题色，只要改 --main-color 这一个地方，全站链接的颜色就都跟着变了。

可以给个备用值

var() 里可以写第二个参数，变量没定义的时候会使用它：

.box {
  /* 如果 --gap 没定义，就用 10px */
  padding: var(--gap, 10px);
}

我踩过的坑

坑一：变量名区分大小写。 我有一次定义的是 --MainColor，取值写的是 --mainColor，怎么都不生效，找了好久才发现。

坑二：变量是会继承的。 在 :root 上定义的变量，子元素都能拿到；也可以只在某个元素上定义，只影响它和它的后代。我后来的星空练习里就用这个办法，把星星的数量放在一个元素上，JS 读起来方便。

坑三：在媒体查询里覆盖变量特别好用。 手机屏幕小的时候直接覆盖变量，比重复写一堆样式干净多了：

@media (max-width: 600px) {
  :root {
    --page-padding: 8px;
    --font-size: 15px;
  }
}

小结

CSS 变量对我来说是那种"知道以后就回不去"的功能，现在写页面基本都会先把颜色、间距这些抽成变量。小练习里的变色圆环就是用变量加 JavaScript 改颜色做的。