CSS变量--CSS和JavaScript的桥梁

小思考：在data里面定义的变量能直接CSS里面使用吗？

解答：当然不能直接使用，但是可以通过 :style="{ dataName }"的形式绑定到元素上。但是我们不推荐把样式写在style属性里；具体有如下两个原因：

 

1．伪元素的使用 如果直接使用:style我们无法设置伪元素的样式；

 

2. 当组件中的一个状态被几十个地方用到时，那么你可能需要绑定很多个:style。一来代码会显得可读性不强，二来性能上应该是比原生的要差。

 

解决方法：VUE3引入的CSS变量

概念：CSS 变量并不是某个框架的产物，而是 CSS 作者定义的一个标准规范。它包含的值可以在整个文档中重复使用。

 

用法：大部分语言的变量都有3个基本特征：声明、使用、作用域。CSS变量也不例外。

1．声明：声明变量的时候，变量名前面要加前缀两根连词线（--）

body{
　　--main-color:#4d4e53;
　　--main-bg:rgb(255,255,255);
}

它们与color、background-color等正式属性没有什么不同，只是没有默认含义。所以CSS变量又叫做"CSS自定义属性"。

注意：变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

 

2．使用：CSS在使用变量的时候用到了一个函数叫var()

虽然和Sass一样，调用时要带着前缀，但不一样的是需要用一个var()来把变量包裹起来。

 

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

 

注意：var() 参数可以使用第二个参数设置默认值，当该变量无效的时候，就会使用这个默认值

 

3.作用域：变量的作用域就是它所在的选择器的有效范围。

同一个CSS变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与CSS的"层叠"（cascade）规则是一致的。

 

如果希望能够在 HTML 文档中都能访问到，则可以定义在类 :root 中

由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。