CSS变量（Custom Properties）的定义和使用方法

翻滚的胖子
2023-06-21 10:16:41
HTML JavaScript

CSS变量（Custom Properties）是CSS3新增的功能，可以定义一些在整个CSS文件中重复使用的值。这些值可以是颜色、长度、字体等等。

CSS变量的定义

要定义一个CSS变量，需要使用--开头，后面跟上变量名和值。可以在全局或局部的CSS规则中定义。

1	`:root {<br> --main-color:` `#FF0000;<br>}<br><br>.box {<br> --main-color:` `#00FF00;<br>` `color: var(--main-color);<br>}`

在全局规则中定义的变量，可以被整个文档中的元素所使用。局部规则中定义的变量，只能被包含该规则的元素使用。

CSS变量的使用

使用CSS变量，需要使用var()函数，将变量名作为参数传入。

1	`.box {<br> --main-color:` `#00FF00;<br>` `color: var(--main-color);<br>}`

在上面的例子中，color属性的值为var(--main-color)，代表使用名为--main-color的CSS变量。这个变量的值是#00FF00。

CSS变量的细节用法

变量的值可以是其他变量

在定义CSS变量时，可以使用其他CSS变量作为值。这样就可以实现变量的复用。

1	`:root {<br> --main-color:` `#FF0000;<br> --second-color: var(--main-color);<br>}<br><br>.box {<br> --main-color:` `#00FF00;<br>` `color: var(--second-color);<br>}`

在上面的例子中，--second-color的值是var(--main-color)，代表使用名为--main-color的CSS变量。这个变量的值是#FF0000。

变量只能用于属性值，不能用于属性名和选择器

CSS变量只能用于属性值，不能用于属性名和选择器。下面的代码是错误的：

1	`:root {<br> --main-color:` `#FF0000;<br>}<br><br>.--main-color {<br>` `color: var(--main-color);<br>}`

正确的做法是使用变量来定义属性值：

1	`:root {<br> --main-color:` `#FF0000;<br>}<br><br>.box {<br>` `color: var(--main-color);<br>}`

变量名区分大小写

CSS变量名区分大小写，--main-color和--Main-Color是不同的变量。

CSS变量的代码案例

下面是一个简单的代码案例，展示了如何使用CSS变量定义一个按钮的样式。

:root { --primary-color: #007bff; --secondary-color: #6c757d; --button-height: 50px; --button-padding: 0 20px; } .btn {  display: inline-block;  height: var(--button-height);  line-height: var(--button-height);  padding: 0 var(--button-padding);  background-color: var(--primary-color);  color: #fff;  text-align: center;  text-decoration: none;  font-weight: bold; border-radius: 4px; transition: background-color .3s; } .btn-secondary {  background-color: var(--secondary-color); }

在上面的代码中，定义了四个CSS变量：--primary-color、--secondary-color、--button-height、--button-padding。使用这些变量来定义.btn类的样式。其中，.btn-secondary类使用--secondary-color定义背景色。

以上就是CSS变量的定义和使用方法，希望对你有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com