CSS 之 自定义属性（变量）

一、简介

​ CSS的自定义属性，又称为CSS变量或级联变量，用于定义一个带有值的、可重复使用的CSS属性（变量）。其包含的值可以在其作用域内的任意属性上重复使用，在使用时需要借助var()函数获取自定义属性的值。当自定义属性的值发生变化时，所有使用该自定义属性的CSS属性都会随之变化。

​ 通常会将项目中大量重复的样式属性值设置为自定义属性，例如：字体颜色、字体大小、主题色等等。这不仅提高了代码的可维护性和可读性，还使得样式的动态调整变得更加容易。当这些样式属性的值，需要变更时，只需要修改自定义属性的值即可，无需依次修改对应CSS样式属性的值。

​ 在使用自定义属性时，要注意浏览器兼容性：

二、基础语法

1、声明自定义属性

​ 声明一个自定义属性，需要在CSS的某个样式块（规则集）中，且必须以--作为属性名的开头，后面跟随其他合法字符组成自定义属性的属性名。属性值可以是任何有效的CSS样式值。

element {
	--test-color: red;
}

​ 自定义属性所在样式块的选择器决定了自定义属性的作用域，自定义属性只能在该选择器元素及其子孙元素中使用。如果想要设置一个全局的自定义属性，最佳实践是定义在根伪类:root的样式块内，这样就可以在HTML全局任何样式块中使用该自定义属性：

:root {
	--test-color: red;
}

​ 注意： 自定义属性的名称是严格区分大小写的，--test与--Test是两个完全不同的自定义属性。

2、使用自定义属性

​ 想要使用自定义属性，需要借助CSS的var()函数。var()函数需要放置在CSS样式的属性值位置上，内部包含一个自定义属性的名称。函数会寻到找对应的自定义属性，并把自定义属性的值插入作为当前样式的属性值。

.test-div {
	color: var(--test-color);
}

/* 样式效果等同于 */

.test-div {
	color: red;
}

​ 无论自定义属性是在样式块中的哪一行进行的声明，其都可以在当前样式块内的任意属性上被使用，无论该属性是位于自定义属性声明之前，还是自定义属性声明之后。

.test-div {
  /* 自定义属性声明之前的样式可以使用 */
	color: var(--test-color);
  /* 声明自定义属性 */
	--test-color: red;
   /* 自定义属性声明之后的样式可以使用 */
	background: var(--test-color);
}

3、继承

​ 后代元素会继承父元素中声明的自定义属性，在后代元素中可以使用到父元素中的自定义属性，换句话说：自定义属性可以在该选择器元素及其子孙元素中使用。

<template>
  <div class="father">
    <div class="son1">
      这是一个子元素
      <p>这是一个孙子元素</p>
    </div>
  </div>
</template>

<style scoped>
/* 父元素中定义自定义属性 */
.father {
  --test-color: red;
}
/* 子元素可以继承并使用该自定义属性 */
.son1 {
  color: var(--test-color);
}
/* 后代元素也可以继承并使用该自定义属性 */
.son1 > p {
  color: var(--test-color);
}
</style>

4、优先级

​ 如果在不同层级的样式块中定义了同名的自定义属性，则var()函数获取自定义属性值时，会按照就近原则获取。

​ 例如父元素定义了名为--test-color的自定义属性，而子元素同样定义了名为--test-color的自定义属性，则在子元素和孙子元素中通过var(--test-color)使用自定义属性时，按照就近原则，获取的将会是子元素中自定义属性的值。

<template>
  <div class="father">
    <div class="son1">
      这是一个子元素
      <p>这是一个孙子元素</p>
    </div>
    <div class="son2">
      这是第二个子元素
    </div>
  </div>
</template>

<style scoped>
.father {
  /* 父元素声明的自定义属性 */
  --test-color: red;
}
.son1 {
  /* 子元素声明的同名自定义属性 覆盖父元素 */
  --test-color: yellow;
  /* 就近原则 取到最近子元素的自定义属性 */
  color: var(--test-color);
}
.son1 > p {
  /* 孙子元素 取到子元素的自定义属性 */
  color: var(--test-color);
}
.son2 {
  /* 就近原则 子元素取到父元素的自定义属性 */
  color: var(--test-color);
}
</style>

​ 还有一条原则是：style行内样式中声明的自定义属性，其优先级大于CSS样式块中声明的自定义属性，最终通过var()使用自定义属性时，生效的是style行内样式中声明的自定义属性。

5、备用值（默认值）

​ 在通过var()函数使用自定义属性时，可以定义备用值，当自定义属性未定义或无法获取时，浏览器会将备用值设置为样式属性值。

​ var()函数有两个参数，第一个参数是引用的自定义属性名称，第二个可选参数就是备用值。备用值可以包含除换行符、分号等特殊字符外的常见字符。

/* 当自定义属性未定义时 取备用值 */
color: var(--test-color2, green);

​ var()函数允许在备用值中嵌套var()，但并不建议这么做，因为这可能会花费大量的时间在处理变量上，导致性能问题。

/* var()中嵌套var() */
color: var(--test-color2, var(--test-color, green));

​ 备用值中允许使用,连接多个值，但浏览器并不会将这些值进行分割，而是会将其作为一个整体，赋值给样式属性，通常来说，这样设置的属性值都是无效值。如果自定义属性是未定义的，且备用值也是无效的，那该样式属性将不会起作用，元素将会展示默认样式。

/* var()的备用值中使用 , 拼接多个值 */
color: var(--test-color2, green, blue);
/* 等同于 */
color: green, blue;

​ 注意： 如果是浏览器不支持CSS自定义属性，那么设置备用值也不会起作用。

6、无效属性

​ 当自定义属性被解析时，浏览器并不知道其会在什么场景下使用，因此默认自定义属性的值都是有效的。但在具体使用自定义属性时，如果自定义属性的值与样式属性不匹配，就会导致样式属性成为一条无效属性。

​ 当浏览器遇到这种无效属性时，var()的备用值也不会起作用，因为确确实实是取到了值。元素最终的样式效果，会使用元素去掉该样式属性后的效果。

/* 当自定义属性无效时 备用值无效 取元素本身样式 */
font-size: var(--test-color, 40px);
/* 等同于 无效属性 */
font-size: red; 

​ 注意： 当CSS中的属性值存在语法错误时，该属性会直接被忽略，如果还存在其他同名且合法的属性，则其他属性会正常起作用；但是如果是获取的自定义属性的值无效，其并不会被忽略，其他同名且合法的属性也会被该属性覆盖，从而不起作用，只能显示元素去掉该样式属性后的效果。

.son1 {
  /* 一个合法的属性 最终起作用 */
  font-size: 30px;
  /* 不合法的属性 会被忽略 */
  font-size: red;
}

.son2 {
  /* 一个合法的属性 会被无效属性覆盖 */
  font-size: 30px;
  /* 当自定义属性无效时 覆盖其他属性 只能展示元素本身的样式 */
  font-size: var(--test-color);
}

7、JavaScript操作

​ CSS的自定义属性还给我们提供了一种新的JS与CSS交互的方式，可以在JS中直接操控元素的CSS样式，实现样式的动态变化。在JS中，可以通过setProperty()方法设置或修改CSS自定义属性的值。该方法相当于设置了一个style行内样式，并在其中设置了一个自定义属性，这一点在DOM节点上也有所的体现。

声明自定义属性：

// 获取元素DOM
const el = document.querySelector('.father')
// 设置元素的CSS自定义属性的值
el.style.setProperty('--test-color', 'blue')

DOM节点：

<div class="father" style="--test-color: blue;">
  ...
</div>

修改自定义属性：

​ 在JS中只能修改style行内样式中的自定义属性（手动定义或setProperty设置），CSS样式块中的自定义属性无法修改，但是当在style行内样式中声明一个同名的自定义属性，由于其优先级高于CSS样式块中的自定义属性，因此起作用的是新声明的自定义属性。从效果来看，也算是修改了自定义属性的值，但并非真正意义的修改。

// 获取元素DOM
const el = document.querySelector('.father')
// 修改元素的CSS自定义属性的值
el.style.setProperty('--test-color', 'red')

获取自定义属性值：

​ 在JS中还可以通过getPropertyValue()获取style行内样式中的自定义属性（手动定义或setProperty设置）。同样，CSS样式块中的自定义属性无法被获取到。

<!-- 手动指定一个行内的自定义属性 -->
<div class="father" style="--test-color: #ccc">
  <!-- 。。。 -->
</div>

<script>
  // 获取元素DOM
  const el = document.querySelector('.father')
  // 获取元素style中的自定义属性的值
  console.log(el.style.getPropertyValue('--test-color')) // #ccc
  // 修改元素的自定义属性的值
  el.style.setProperty('--test-color', 'blue')
  // 再次获取元素style中的自定义属性的值
  console.log(el.style.getPropertyValue('--test-color')) // blue
  // 获取CSS样式块中的自定义属性 无法获取
  console.log(el.style.getPropertyValue('--test-size')) // 空
</script>

<style>
  .father {
    /* 样式块中的自定义属性 */
    --test-size: 20px;
  }
</style>