一学就会，教你创建和使用 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 变量了。

总结

自从我开始使用 CSS 变量，我的样式表变得更简洁、更易于维护，开发效率也得到了提升。真心推荐给大家！

如果你对 CSS 变量有任何疑问，欢迎在评论区留言，我会尽力解答。

最后，别忘了还有更多精彩内容等你探索！

---

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

JavaScript 字符串处理：trim()和replace()

10 个 必备的JavaScript 实用技巧和最佳实践！

Vue 开发者必备技能：深入理解 Composition API ！

2024 年 10 个很实用的 CSS 新特性，你不一定知道！

10个 React 开发避坑指南

12 种 Vue 设计模式

CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！

JavaScript 的新技能：5 大技巧，打造更强大的 Web 应用

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书