CSS Variable，也叫CSS自定义属性，是CSS3的一项新特性，可以将值保存在一个名称中，然后在整个文档中重复使用该名称。它提供了一种更为灵活的CSS编程方式，让我们能够轻松地维护颜色、字体、间距等信息。本文将从多个方面对CSS Variable做详细的阐述。
一、变量的声明
要使用CSS变量，需要使用两个中括号定义变量名称。变量名称可以使用字母、数字、连接符和下划线进行任意组合。例如，要声明一个变量，可以用以下代码：
:root {
--primary-color: #007bff;
}
其中，:root表示整个文档的根元素，--primary-color为变量名称，#007bff为变量值。可以根据需要在同一级声明多个变量。
二、变量的使用
使用CSS变量，可以通过var()函数来获取定义在文档中的值。例如，要使用上述定义的primary-color变量，可以用以下代码：
body {
color: var(--primary-color);
}
通过var()函数引用变量，可以在多个元素中重复使用同一副代码，减少冗余代码，提高开发效率。
三、变量的继承
CSS变量支持继承，也就是说，如果某个元素未定义某个变量，它会从它的父级元素中继承该变量的值。例如：
:root {
--primary-color: #007bff;
}
header {
--text-color: #fff;
}
main {
--text-color: #000;
}
header h1 {
color: var(--text-color);
}
main p {
color: var(--text-color);
}
在上面的代码中，header元素和main元素定义了不同的text-color变量。在header元素中使用text-color变量时，它将使用定义在header中的值。在main元素中使用时，它将使用定义在main中的值。但是，如果头元素位于主元素之内，则h1元素将继承--text-color的值“#ffffff”。
四、变量的值计算
CSS变量还支持变量值计算。也就是说，可以在变量中使用数学运算符进行计算。例如：
:root {
--width: 50px;
}
.box {
width: calc(var(--width) * 4);
}
在上述代码中，.box类的宽度将为200px。
五、变量的作用域
CSS变量的作用域只限于声明该变量的规则集以及父规则集，不会影响其他规则集。例如：
:root {
--width: 50px;
}
.box1 {
--width: 100px;
}
.box2 {
width: var(--width);
}
在上述代码中，box2元素的宽度仍然是50px，因为它没有访问box1规则集中定义的--width 变量值。
六、变量的应用实例
CSS变量可以用于多种用例，例如： 1.定制主题色
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.button-primary {
background-color: var(--primary-color);
}
.button-secondary {
background-color: var(--secondary-color);
}
通过定义--primary-color和--secondary-color变量，可以让按钮轻松地保持一致的颜色风格。 2.动态文本注入
使用CSS变量，可以让动态文本注入变得更加简单。例如，在上面的代码中，使用[data-text]选择器将"data-text"特性添加到段落标记上。然后，使用:before伪元素将数据属性注入元素。 3.布局调整 使用CSS变量可以在多个页面或项目中轻松重用样式属性。例如预定义页面元素的样式，可以使用以下代码：
:root {
--sidebar-width: 200px;
--header-height: 50px;
}
.sidebar {
width: var(--sidebar-width);
height: calc(100vh - var(--header-height));
}
.header {
height: var(--header-height);
}
4.响应式设计 使用CSS变量可以轻松调整响应式设计元素的响应方式。例如，可以像下面这样定义一个通用的屏幕尺寸变量：
:root {
--screen-lg: 992px;
}
@media (min-width: var(--screen-lg)) {
.container {
max-width: 960px;
}
}
在上面的代码中，使用CSS变量，可以轻松调整屏幕尺寸的响应方式。在上述示例中，当浏览器窗口宽度大于992px时，.container类将使用960px的最大宽度。
总结
CSS Variable是CSS3的新特性，通过声明变量、引用变量、继承变量、使用变量计算和控制变量作用域等诸多特性，可以在开发中大幅优化代码结构、提高开发效率、降低维护成本。
