在CSS中使用变量主要依靠CSS自定义属性(Custom Properties)，这些变量通过`--`前缀定义，便于在整个样式表中重复使用。其基本语法为`--变量名: 值;`，可以定义在任意选择器的上下文中。
定义变量的一种常见场景是在`:root`选择器中，这样可以确保变量在全局范围内都有效。例如，可以这样定义主色调：
```css:root { --main-color: #3498db;}```
一旦定义了自定义属性，可以通过`var()`函数来调用这些变量。语法为`var(--变量名)`。例如，假设希望在某个元素的背景色中使用上面定义的主色调，可以这样进行设置：
```cssbody { background-color: var(--main-color);}```
使用CSS变量还可以实现主题切换功能。通过在`:root`中定义不同的色彩主题，可以快速修改整个页面的样式。例如，定义一个深色模式的变量，切换样式时只需改变`:root`中的值即可：
```css:root { --main-color: #3498db;}body.dark-mode { --main-color: #2c3e50;}```
在某些情况下，CSS变量也支持使用回退值。当变量未定义时，可以设置一个默认值。使用方法为`var(--变量名, 默认值)`。例如：
```cssh1 { color: var(--text-color, black);}```
值得一提的是，CSS变量拥有层次作用域，这意味着如果在某个元素中重新定义了同名的变量，那么这个元素及其子元素将使用新的值，而不影响其他部分的样式。
除了颜色，CSS变量也可以用于其他属性。比如，可以存放字体大小，边距，甚至是渐变值。这为样式提供了极大的灵活性。
在某些浏览器中，支持CSS变量的功能尚不普遍，因此在使用时需关注兼容性。不过大多数现代浏览器都已支持这一特性。
CSS变量为样式表的编写提供了更灵活、可维护的方式。使用变量不仅能减少代码重复，还能让样式更易于管理及修改。