当我们在开发较大的CSS文件时，会遇到使用重复变量的情况，此时可以使用 CSS变量 来简化开发，具体看代码示例。

用法

// 声明css变量
element {
--main-bg-color: brown;
}
// 使用css变量
element {
background-color: var(--main-bg-color);
}

demo

这里使用 MDN 的例子进行说明

.one {
color: white;
background-color: brown;
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: brown;
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: brown;
margin: 10px;
width: 100px;
}
.five {
background-color: brown;
}

我们可以看到上述代码中都重复用到了 background-color， 并且对应的值都相同，此时就可以用css变量来简化开发。

:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}

可以看到我们使用 :boot 来定义全局变量： :boot 一般可以认为是 html ，因为css变量有作用范围与继承性，即在 element1 中定义的css变量只能用于 element1 及其子类的css规则中，所以我们奖css变量定义在 :boot 中，就可以在全文应用css变量，这也是我们的一般用法。

参考

Using CSS custom properties (variables)

最后

以上就是舒适外套为你收集整理的CSS基础——使用CSS变量用法demo参考的全部内容，希望文章能够帮你解决CSS基础——使用CSS变量用法demo参考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。