如何使用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

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架