- Objective:
- Breadcrumb:
# 概念阐释
## 语义
储存全局样式的CSS变量，它包含的值可在整个文档中重复使用。
- 如果整个网站的样式发生变化，只需要改变全局变量中的数据
- 语义化标识更容易理解
## 语法
```css
element {
--main-bg-color:#2e80f2;
}
```
- 属性名需要以两个减号（`--`）开始
- 属性值为任何有效的CSS值
### 定义在根伪类`:root`下
可以访问在[[JavaScript HTML DOM API]]树下的所有元素
```css
:root {
--ifm-color-primary: #21a5ff;
}
```
`body {...}`只能访问`<body>`标签下的内容。
### 使用CSS自定义全局变量
```css
.one {
background-color: var(--main-bg-color);
}
```
如果在全局变量中更改了颜色，使用了这一变量的所有地方都将改变，而不需要一个个替换了。
# 实例
- docusaurus 的css文件
- Obsidian的CSS theme
# 相关内容
# 问题
# 问题答案
# 参考资料
- [使用 CSS 自定义属性（变量）](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
- [自定义属性变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*)