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

本文介绍: 伪类选择器；伪元素选择器；伪类和伪元素选择器的区别；本篇，介绍 CSS 变量 var；CSS 变量，由 CSS 作者定义，也被称作“CSS 自定义属性”或“CSS 级联变量”；通过声明 CSS 变量，抽取重复的 CSS 属性值，能够统一的进行维护和管理；和其他变量相似，CSS 变量也可以具有全局作用域和局部作用域；使用 CSS 变量，能够增强代码的可读性，也使变量值具备语义化标识；

一，前言

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

本篇，介绍 CSS 变量 v ar；

一，CSS 变量简介

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

二，CSS 变量的使用

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

&lt;!-- 声明 CSS 变量 --&gt;
:root {
  --main-bg-color: red;
}

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

注意：

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

三，CSS 变量的作用域

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

声明两个全局变量（–blue 和 –wh i t e），使用 v ar() 函数在样式表中插入变量的值：

四，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>