如何使用CSS变量 - 通过代码示例解释

如果你正在构建网站或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()函数为其赋值。

这是如何做的:

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

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

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

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

如何使用CSS变量

现在让我向您展示如何使用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变量的方法:

jsx 复制代码
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钩子。

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

jsx 复制代码
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变量可以极大地改善您的样式体验,并使您更加高效。

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

(本文内容参考:java567.com

相关推荐
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发3 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components
顾菁寒3 小时前
WEB第二次作业
前端·css·html