巧用CSS变量，让你的项目更加炫酷！-猿码集

1. CSS变量介绍

CSS变量是一种可以在CSS中定义和存储值的方式，类似于JavaScript中的变量。CSS变量以--开头，并使用var()函数进行调用。

使用CSS变量可以让样式更加灵活，而且可以在不同的选择器中共用一个变量，方便管理。CSS变量的作用范围为定义该变量的选择器及其后代元素。


:root {
  --primary-color: #007bff;
}
.button {
  color: var(--primary-color);
}

上述代码中，:root选择器表示根元素，在所有元素中都可访问到定义的--primary-color变量。而.button选择器中使用了var()函数，调用了--primary-color变量。

2. 基本使用方法

2.1 变量定义

变量定义需要在其作用的选择器中编写，使用--作为前缀，后接自定义变量名和冒号:，值和分号;。如下所示：


:root {
  --primary-color: #007bff;
}

上述代码中，--primary-color是自定义的变量名，其值为#007bff。

2.2 使用变量

在使用变量时，需要使用var()函数进行调用，如下所示：


.button {
  background-color: var(--primary-color);
}

上述代码中，background-color属性使用了var()函数，调用了定义的--primary-color变量。

3. 变量的继承和覆盖

3.1 继承变量

子元素可以继承其父元素的变量值，无需再次声明。如下所示：


:root {
  --font-size: 16px;
}
.section {
  font-size: var(--font-size);
}
.section p {
  /* p元素继承了.section的font-size变量 */
  color: red;
}

上述代码中，.section p元素继承了.section的--font-size变量值。

3.2 覆盖变量

如果在不同的选择器中定义了同名的变量，那么变量值将会被覆盖。如下所示：


:root {
  --primary-color: #007bff;
}
.button {
  color: var(--primary-color);
}
.button-primary {
  /* 覆盖--primary-color变量 */
  --primary-color: #28a745;
  background-color: var(--primary-color);
}

上述代码中，--primary-color变量在.button-primary选择器中被覆盖，所以background-color属性值为#28a745。

4. 使用CSS变量创建酷炫效果

4.1 边框渐变效果

使用CSS变量可以创建酷炫的边框渐变效果。如下所示：


:root {
  --primary-color: #007bff;
  --border-gradient: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 50%, #fff 50%, #fff 100%);
}
.button {
  border: 4px solid;
  border-image: var(--border-gradient) 1;
}

上述代码中，--border-gradient变量使用linear-gradient()函数定义了一个从左到右的渐变，颜色变化从--primary-color到白色。而border-image属性即可使用该变量定义的渐变作为边框。

4.2 高亮效果

使用CSS变量可以创建高亮效果，随着鼠标移动而变化。如下所示：


/* 定义一个不透明度为0的变量 */
:root {
  --opacity: 0;
}
/* hover时改变该变量的值来实现高亮效果 */
.button {
  background-color: #007bff;
  color: #fff;
  transition: 0.3s;
  position: relative;
}
.button:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 3px;
  background-color: var(--primary-color);
  opacity: var(--opacity);
  transition: 0.3s;
}
.button:hover {
  /* 改变--opacity变量的值 */
  --opacity: 0.4;
}

上述代码中，--opacity变量初始值为0，且使用了transition属性。当.button元素被hover时，使用::before伪类为该元素创建一个绝对位于其上方的盒子，在盒子中使用--primary-color变量定义背景色，并使用var()函数调用了--opacity变量，来控制淡入淡出的透明度。

5. 总结

CSS变量是一种简单、灵活、易于维护的方法，可以让样式更加灵活，让设计师和开发者之间更好地协作。使用CSS变量可以创建许多酷炫的效果，如边框渐变、高亮效果等。同时，CSS变量的兼容性也很不错，目前主流浏览器都已支持该特性。

巧用CSS变量，让你的项目更加炫酷！