CSS中有不同类型的变量，这些变量被称为CSS变量。
变量类型：
1. 全局变量：在:root中定义的变量，可以在整个文档中使用。
例如：
```
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
}
```
2. 局部变量：在任何选择器中定义的变量，仅限于该选择器内部使用。
例如：
```
.btn-primary {
--primary-color: #007bff;
background-color: var(--primary-color);
}
```
3. 环境变量：在容器中定义的变量，可以在该容器及其子元素中使用。
例如：
```
.container {
--primary-color: #007bff;
}
.container button {
background-color: var(--primary-color);
}
```
在使用变量时，我们可以使用var()函数来引用它们。变量名必须以两个破折号 (--) 开头。
使用变量有很多好处，例如：
- 更方便的色彩管理
- 更易于主题设计
- 代码量相比硬编码减小
总结一下，CSS变量不仅能够增强代码的可读性和可维护性，同时也使得设计更加的灵活。我们应该善于使用它们，以提高我们的代码质量。
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
}
.btn-primary {
--primary-color: #007bff;
background-color: var(--primary-color);
}
.container {
--primary-color: #007bff;
}
.container button {
background-color: var(--primary-color);
}