掌握CSS变量——打造更简洁、可维护的前端样式

前言

在很多开发中，我们都会遇到需要根据用户的需求或者不同场景来调整样式的情况，这时候就可以使用 CSS 变量了。本文旨在介绍 CSS 变量及其相关用法。

什么是 CSS 变量

CSS 变量建立了一些基础的命名值，因此你可以很容易地定义一次并在你所选择的任何地方重复使用它们。CSS 变量也被称为 CSS 属性（CSS properties），以两个破折号“–”作为前缀。

在这里提到的变量，通常需要与一些属性搭配使用。那么如何定义一个 CSS 变量呢？

定义 CSS 变量

下面是定义 CSS 变量的方式：

:root {
  --main-bg-color: #f3f3f3;
}

/* 使用变量 */
body {
  background-color: var(--main-bg-color);
}

• :root 表示的是文档的根元素，在 HTML 中即是 html 标签。
• –main-bg-color 即是定义的 CSS 变量名称。
• #f3f3f3 即是该变量对应的值。
• body 使用 var() 函数来获取 CSS 变量的值。
  这种方式可以允许 Programmer 更改页面的主题(Theme)，而无须在每个组件内都写一份相同的颜色规则，并且使更改非常方便(只需编辑一个 CSS 文件)。

过去我们或许会用 Sass 或者 Less 来完成这个任务。现在这个问题有了一种简单、原生的解决方案。看起来是 CSS 语言自带了 Sass/Less 的功能。

媒体查询配合 CSS 变量

现在假设，我们想在宽度小于 640 像素时将特定颜色转换为另一种颜色，但是我们不想监听浏览器宽度——相反，我们想直接取决于屏幕大小。我们也可以使用 media queries 和变量来实现这一点。看下面的示例：

:root {
  --less-width: 640px;
  --black-color: #333333;
  --white-color: #fff;
}

@media(max-width: var(--less-width)) {
  body {
    background-color: var(--black-color);
    color: var(--white-color);
  }
}

在这个代码片段中，我们在 :root 上定义了一个 LESS_WIDTH 变量，并在 media query 中参考了它。 在较小设备上，我们会修改特定的 CSS 变量以显示不同的颜色方案。

JavaScript 与 CSS 变量

如果 JavaScript 要为特定 CSS 变量设置值，可以使用以下方式：

Hello World!

:root {
  --text-color: #666;
}

.text {
  color: var(--text-color);
}

const text = document.querySelector('.text');
text.style.setProperty('--text-color', 'red');

可以看到，我们首先使用了 getComputedStyle() 方法获取了 .text 节点的 computedStyle，并使用了 getPropertyPriority() 方法来检索 text-color 变量是否存在。 最后，我们通过 setProperty() 方法来为它重新分配一个新的值。

总结

CSS 变量是一个不错的选择，可以更有逻辑和可读性的管理管理手头的项目。阅读本文之后，您应该掌握了创建、调用和修改 CSS 变量的方法。 now，已经可以开始在实际项目生产中尝试应用 CSS 变量了。

以上就是本次的内容，CSS 变量虽然谈不上高大上，却是一个比 Sass、Less、Stylus 还要更好的 CSS 预处理语言。确定好主题颜色后，再去全局替换这个变量即可，比直接替换颜色值轻松得