【CSS 知识总结】第五篇 - CSS 变量 var

一，前言

上一篇，介绍了 CSS 选择器伪类和伪元素，主要涉及以下几个点：

• 伪类选择器；
• 伪元素选择器；
• 伪类和伪元素选择器的区别；

本篇，介绍 CSS 变量 var；

一，CSS 变量简介

• CSS 变量，由 CSS 作者定义，也被称作“CSS 自定义属性”或“CSS 级联变量”；
• 通过声明 CSS 变量，抽取重复的 CSS 属性值，能够统一的进行维护和管理；
• 和其他变量相似，CSS 变量也可以具有全局作用域和局部作用域；
• 使用 CSS 变量，能够增强代码的可读性，也使变量值具备语义化标识；

二，CSS 变量的使用

• 声明 CSS 变量，属性名以两个减号（--）开始，属性值为任何有效的 CSS 值；
• 使用 CSS 变量标记定义，如：--main-color: black;；
• 使用 var() 函数获取变量值，如：color: var(--main-color) ;；

<!-- 声明 CSS 变量 -->
:root {
  --main-bg-color: red;
}

<!-- 使用 CSS 变量 -->
.demo {
  color: white;
  background-color: var(--main-bg-color);
}

注意：

• 当浏览器遇到无效的 var() 时，会使用继承值或初始值代替；
• CSS 变量的属性名，对大小写是敏感的；如：--my-color 和 --My-color 是两个不同的变量；

三，CSS 变量的作用域

• CSS 变量也具有作用域的概念，可以声明为全局 CSS 变量、局部 CSS 变量；
• 全局变量能够在整个文档中被访问和使用，局部变量只能在被声明的选择器中使用；
• 创建全局作用域的变量，在:root选择器中声明(:root选择器会匹配文档的根元素);
• 创建局部作用域的变量，在需要使用变量的选择器中进行声明;

声明两个全局变量（–blue 和 --white），使用 var() 函数在样式表中插入变量的值：

四，CSS 变量的继承特性

• CSS 变量会受到级联的约束，继承来自父元素的属性值；

如果在元素上没有为 CSS 变量设置值，那么将使用父元素上的值：

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

在这个情况下， var(--test) 的结果分别是：

• 对于元素 class="two" ：10px；

• 对于元素 class="three" ：2em；

• 对于元素 class="four" ：10px （继承自父属性）；

• 对于元素 class="one" ：非法值，取 CSS 变量的默认值；

• 注意
  CSS 变量虽然会继承父元素的属性值，但它和 JS 中的变量是有区别的；

五，CSS 变量的兼容性

Can I Use：CSS 变量 var 的兼容性

六，结尾

本篇，主要介绍了 CSS 变量相关知识，主要涉及以下几个点：

• CSS 变量简介；
• CSS 变量的使用；
• CSS 变量的作用域；
• CSS 变量的继承特性；
• CSS 变量的兼容性；

下一篇，开始介绍 CSS 布局；