作为一名 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()
Vue 开发者必备技能:深入理解 Composition API !
2024 年 10 个很实用的 CSS 新特性,你不一定知道!
JavaScript 的新技能:5 大技巧,打造更强大的 Web 应用
我是前端宝哥,每日分享前端开发技术,关注下面二维码,围观我的朋友圈。
![befb1538eff26c4634300ca67c4825c4.png](https://img-blog.csdnimg.cn/img_convert/befb1538eff26c4634300ca67c4825c4.png)
关注下方公众号加星标,送我的电子书资料
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书