CSS 变量：自定义属性、:root 与 var()

声明和使用 CSS 变量

CSS 变量的正式名称是自定义属性，它是名称以 -- 开头的属性。只需声明一次，通常写在 :root 上，让整个页面继承它，然后在任何地方用 var() 读取。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

把 --brand 改成 #16a34a，卡片边框和按钮会一起变化。这正是变量的意义：一个值，只需在一个地方修改。变量还可以和 calc() 组合使用，按钮的左右内边距就是例子。

语法

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

:root 匹配 <html> 元素。用它而不用 html，是因为它的优先级和类相同，而且按照惯例，它表示“全局设置”。

作用域：按组件覆盖变量

因为变量会继承，在某个元素上重新声明变量，就会改变这个元素及其内部所有内容中的值。使用变量的那条规则保持不变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

各个变体只设置了一个变量，从不直接设置边框。再加第四个变体也只需一行。

后备值

当元素及其所有祖先都没有定义变量时，var(--name, fallback) 会使用后备值。第一个逗号之后的所有内容都是后备值，所以它本身可以包含逗号（var(--font, Georgia, serif)），也可以是另一个 var()。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

用 JavaScript 修改变量：主题切换

JavaScript 可以用 style.setProperty() 在任何元素上设置变量。设置在 document.documentElement（即 <html> 元素）上，整个页面都会跟着变。更常见的做法是切换一个重新定义变量的类名：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

用 getComputedStyle(element).getPropertyValue('--text') 读回变量的值。注意，setProperty 会在 <html> 上写入行内样式，而行内样式会胜过 .dark 类，所以按下第二个按钮之后，文字颜色在两种主题下都不会再变，直到用 root.style.removeProperty('--text') 移除这个行内值。

从 HTML 传值

把变量写在 style 属性里，是把每个元素各自的数据传给样式表最干净的方式。设计仍然留在 CSS 中，HTML 只提供一个数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) 把普通数字变成百分比。变量还可以在媒体查询中改变：@media (min-width: 900px) { :root { --space: 20px; } } 会让所有读取 --space 的间距在宽屏上变大。

无效值陷阱

浏览器无法提前知道变量的值对使用它的属性是否有效。如果无效，这个属性不会退回到规则中之前的声明，而是变成计算值时无效，表现得就像被设成了 unset：可继承的属性取父元素的值，其他属性取初始值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

文字从 <body> 继承了 16px，border-width 回到它的初始值 medium，浏览器会把它画成 3px。不用变量时，无效的声明会被丢弃，它前面的声明仍然有效；用了变量，就来不及这样处理了。当变量已定义但值不对时，后备值也帮不上忙：后备值只用于未定义的变量。

CSS 变量与 Sass 变量

两者可以配合使用：很多项目用 Sass 处理构建时的逻辑，再为所有需要主题化的内容输出 CSS 变量。

常见错误

• 忘了两个连字符。var(brand)，以及把 --brand 写成 -brand 来声明，都不起作用。
• 在媒体查询中使用变量。@media (min-width: var(--bp)) 是无效的。媒体条件需要字面值。
• 以为前面的声明能在变量无效时保留下来。不会保留；见上面的陷阱。
• 单位混用出错。先写 --gap: 10;，再写 margin: var(--gap)px，得不到 10px。使用 calc(var(--gap) * 1px)，或者直接存 10px。
• 在错误的元素上声明。在 .card 上声明的变量，它的兄弟元素和父元素都看不到；共享的值要声明在 :root 上。