掌握CSS变量：代码实例详解

发表时间: 2024-04-05 15:46

如果你正在构建网站或Web应用程序，你应该已经知道代码重复被认为是一种不良实践。

这就是为什么你应该学习如何使用CSS变量来减少你编写的CSS代码量并将你的样式带到一个新的水平。

最成功的Web应用程序拥有令人惊叹的设计。不幸的是，为了达到预期的效果，Web开发人员需要准备大量的样式。这迫使我们在许多不同的元素中重复值，比如颜色。

幸运的是，现代样式表支持CSS变量，这使您可以减少代码库中的重复。你不需要像CSS模块、Less或SASS这样的外部工具来利用它。

在这个全面的指南中，我将向您展示如何有效地使用CSS变量，涵盖从纯HTML和CSS的基本示例到更高级的框架，如React和Next.js。

（本文内容参考：java567.com）

先决条件

本指南专为初学者而设计，因此您不需要任何特殊知识来从中受益。

我在React和Next.js中包含了一些示例，它们专为初学者React开发人员而设计。只有这些示例需要基本的React知识来理解。如果你不使用React，可以随意跳过它们。

CSS变量是什么？

CSS变量（官方称为CSS自定义属性）允许开发人员在CSS样式表中管理和重复使用值。Web开发人员可以定义可重用的变量，这些变量可以在许多CSS文件中使用，使代码更易于更新。CSS变量使得实现诸如暗黑模式之类的功能变得非常简单。

现代网站需要大量的样式，这导致在许多不同的样式表中重复CSS值。生态系统一直在努力解决这个问题，通过发明诸如SASS、Less和CSS模块等工具，但所有这些工具都有一个缺点 - 最终它们都需要编译成CSS文件。

幸运的是，由于CSS变量，我们可以简化我们的样式表，而不需要复杂的工具和构建过程。

如何创建CSS变量

定义一个CSS变量非常简单。您可以使用--前缀后跟您选择的名称来定义CSS变量，然后使用var()函数为其赋值。

这是如何做的：

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

如您所见，我在:root伪类中定义了CSS变量，以使它们在全局范围内可用。

每个变量都以--开头，后跟名称：--primary-background或--primary-text-color。最后，我为这些变量赋了值。

使用这种方法，我只需修改这些变量的值就可以更改网站的颜色。

如何使用CSS变量

现在让我向您展示如何使用CSS变量来为您的网站定义全局背景和文本颜色：

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

要使用变量，您需要使用var()函数引用它们，并将变量名称作为参数传递。

就是这样！现在您的网站正在使用CSS变量来渲染样式。

注意：var()辅助函数是一个内置的CSS函数，因此您不需要任何库来使用它。

如何在React中使用CSS变量？

许多Web开发人员在React中构建他们的Web应用程序，因此我将向您展示如何在React中获取值并更新CSS变量。许多现代Web应用程序支持暗黑模式，这个功能可能会成为React开发人员的噩梦之一。

接下来，我将向您展示一种仅通过使用CSS变量在React应用程序中添加暗黑模式的简单方法。

如何在React中设置CSS变量的值？

在React中更改CSS变量的值可能会有些棘手，因为React没有提供任何直接与DOM树交互的工具。这就是为什么我们将使用普通JavaScript来读取和设置CSS变量。

以下是您可以在React中设置CSS变量的方法：

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 <div style={{color: "var(--primary-text-color)"}}>Hello World</div>};

如您所见，我利用了全局的document变量来进入DOM树并修改样式属性。我使用了setProperty方法，该方法需要两个参数：

CSS自定义属性（CSS变量）名称。
变量的值。

注意：无论您是在React中还是在纯JavaScript中工作，您都可以始终调用
document.documentElement.style.setProperty来修改CSS变量的值。这是一个JavaScript内置函数。

如何在React中获取CSS变量的值？

有时候您可能需要读取CSS变量的值并将其存储在React中。在这种情况下，我建议利用useState和useEffect钩子。

这是我处理这个问题的方式：

import { useEffect, useState } from 'react';export default function Example() {  const [color, setColor] = useState('black');  useEffect(() => {    const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color');    setColor(cssColor);  }, [])  return <div style={{color: color}}>Hello World</div>};

如您所见，我将--primary-text-color变量的值获取到cssColor常量中。在下一行，我使用useState钩子创建的setColor辅助函数更新了组件的状态。使用这种方法，我的CSS变量可以在React组件中轻松使用。

就是这样。现在您可以在您的React应用程序中使用这个变量了。

结论

CSS变量可以在不同类型的网站中使用，而无需使用JavaScript来利用它们。每个人都可以从中受益 - 无论他们在Web开发中的经验水平如何。理解CSS变量可以极大地改善您的样式体验，并使您更加高效。

希望您喜欢这篇文章，别忘了点赞和关注。