一学就会，教你创建和使用 CSS 变量！

最新推荐文章于 2025-06-04 20:23:59 发布

原创最新推荐文章于 2025-06-04 20:23:59 发布 · 817 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

作为一名 Web 开发者，我一直致力于寻找提高代码质量和效率的方法。最近，我迷上了 CSS 变量，它让我的样式表焕然一新，也让我对 CSS 的理解更上一层楼。

相信很多开发者都遇到过这样的情况：随着网站或 Web 应用规模的增长，样式表也越来越庞大，各种颜色、字体大小、间距等值在不同的样式规则中重复出现，维护起来简直是噩梦。

为了解决这个问题，我尝试过 Sass、Less 和 CSS 模块等工具，它们确实可以减少代码重复，但最终还是要编译成 CSS 文件，增加了构建流程的复杂度。

直到我发现了 CSS 变量，它让我眼前一亮！CSS 变量（官方称为 CSS 自定义属性）允许我们在 CSS 样式表中定义和重用值，就像编程语言中的变量一样。

创建和使用 CSS 变量

定义 CSS 变量很简单，只需使用 -- 前缀后跟变量名，然后用 var() 函数为其赋值。

:root {
  /* 背景 */
  --primary-background: #faf8ef;
  /* 颜色 */
  --primary-text-color: #776e65;
}

我通常在 :root 伪类中定义全局变量，这样在整个样式表中都可以使用。

使用 CSS 变量也很简单，直接用 var() 函数引用变量名即可。

body {
  margin: 0;
  background: var(--primary-background);
  color: var(--primary-text-color);
}

content_copyUse code with caution.Css

现在，只需修改 :root 中的变量值，就能改变整个网站的样式，是不是很方便？

React 中的 CSS 变量

我最近在用 React 开发一个 Web 应用，也尝试在项目中使用 CSS 变量。

在 React 中设置 CSS 变量的值可以用 document.documentElement.style.setProperty 方法：

import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    document.documentElement.style.setProperty('--primary-background', `black`);
    document.documentElement.style.setProperty('--primary-text-color', `white`);
  }, [])

  return Hello World
};

要获取 CSS 变量的值，可以使用 useState 和 useEffect 钩子：

import { useEffect, setState } from 'react';

export default function Example() {
  const [color, setColor] = useState('black');

  useEffect(() => {
    const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color');
    setColor(cssColor);
  }, [])

  return Hello World
};

这样就可以在 React 组件中轻松使用 CSS 变量了。