CSS 自定义属性，通常称为 CSS 变量。类似于 JS 中声明的变量，可以复用 CSS 属性值。
定义格式 ： 变量名：值 ,变量两个–开头
/* 1 创建全局 CSS 变量 --geek-color-primary*/ :root { --geek-color-primary: #fc6627; } /* 2 复用 */ .list-item-active { color: var(--geek-color-primary); } .tabs-item-active { color: var(--geek-color-primary); }作用域
根据 CSS 变量的作用域，分为两种：
- 全局 CSS 变量：全局有效
- 局部 CSS 变量：只在某个作用域内（比如，某个类名中）有效
/*
全局 CSS 变量
1. 使用 :root 这个 CSS 伪类匹配文档树的根元素 html。可以在CSS文件的任意位置使用该变量
相当于 JS 变量中的全局
2. CSS 变量通过两个减号（--）开头，多个单词之间推荐使用 - 链接。CSS 变量名可以是任意变量名
*/
:root {
--geek-color-primary: #fc6627;
}
/* 使用 */
.tabs-item-active {
color: var(--geek-color-primary);
}
.list-item-active {
color: var(--geek-color-primary);
}
/*
局部 CSS 变量
*/
.list {
--active-color: #1677ff;
/* 在该 类 内部使用改变量 */
color: var(--active-color);
}
.test {
/* 这里的错误演示：无效！效果与不使用该变量时一致*/
color: var(--active-color);
}特点
- 可复用
- 语义化，
--geek-color-primary比 #fc6627 更容易让人理解
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218572.html原文链接：https://javaforall.net
