共计 370 个字符,预计需要花费 1 分钟才能阅读完成。
前言
当咱们在编写 CSS
文件的时候,很多的值是大量反复的,如果每次用到都应用具体的值的话,前期不批改还好,一旦波及批改,工作量会很大。
所以,实际中,为了保障可维护性,应用 CSS
变量成为必要。
能够将此纳入 CSS
的编码准则:
一个值只有呈现了不止一次,这个值就该当被定义为 CSS
变量。
实现
同一文件
/* 定义 */
:root {--size: 16px;}
/* 应用 */
div {width: var(--size);
}
不同文件
/* index.css */
:root {--systemBlue-Light: #007AFF;}
/* someComponent.module.css */
@import "../../index.css";
div {color: var(--systemBlue-Light);
}
不同文件间变量的调用使得在 React
中能够轻松实现 CSS
全局变量。
正文完