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

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

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

CSS变量的定义

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

:root {
  --main-color: #FF0000;
}

.box {
  --main-color: #00FF00;
  color: var(--main-color);
}

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

CSS变量的使用

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

.box {
  --main-color: #00FF00;
  color: var(--main-color);
}

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

CSS变量的细节用法

变量的值可以是其他变量

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

:root {
  --main-color: #FF0000;
  --second-color: var(--main-color);
}

.box {
  --main-color: #00FF00;
  color: var(--second-color);
}

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

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

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

:root {
  --main-color: #FF0000;
}

.--main-color {
  color: var(--main-color);
}

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

:root {
  --main-color: #FF0000;
}

.box {
  color: var(--main-color);
}

变量名区分大小写

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);
}