css中的也有变量

css变量

官方认可的一种自定义属性，就是根据我们自身实际的需求定义属性名称和属性值。

如何定义一个css变量？

css变量的声明与我们在JS语法环境中正常声明一个变量的规则相同，可以是字母、数字、下划线、中划线的组合，但是不能数字打头。

在我们声明的变量前面加上两个减号（--）就形成了，符合标准的css变量

如：

div {

        --size:100px;

        --si-ze:100px;

}

注意：属性名严格区分大小写

还有一个特点：计算时有效性，自定义属性值可以是任何内容，就算是不是css内有效的数值，只要属性名符合要求，在使用自定义属性的地方，最终计算结果是有效的就行了

获取css变量属性值

在css中官方提供了一个var()方法来获取自定义属性的值，可以在多个地方获取。

如获取上面的--size：

     

:root {

        --size:100px;

        --si-ze:100;

}

 span {

        font-size:var(--size)

}

  

另外css还提供了calc()方法，可以对我们的自定义属性值进行计算，

如：

  font-size:calc(var(--si-ze)) * 2px

 css变量的用途

1、提取相同的属性

例如我们在一个模块中很多个地方都是使用相同的属性，我们就可以使用自定义属性提取这个属性，需要使用的地方用var()方法获取。

当我们需要修改这些地方的颜色时，只用修改我们自定义的css变量

2、简化相似代码

......

还有很多用法，还可以结合JS来实现一些效果。

css变量的作用域问题

当我们在多个css选择器中定义了同一个变量名，不会存在问题，因为每一个css选择器中就相当于一个作用域，相互不会影响。

当我们在var()方法取变量值时，先访问自己存在的这个css选择器内是否存在这个变量，如果没有就会往它的上级查找，一直找到根标签的选择器。

举个例子：

元素节点结构：

 <div class="box1">

        <div class="box2">

            <div class="box3">

                <div class="box4"></div>

            </div>

        </div>

    </div>

 style标签中：

.box2{

        --color:blue;

}

 这时我们在box2中定义了一个变量，那么box3和box4作为它的子级元素就可以访问这个变量，正是我们所说的往上级查找；但是box1不能反向查找。

如果你在学习JS时会函数的作用域，那么这个对你来说也是非常容易理解的。

变量并不总是有效可用的，而限定变量的可用性范围就是变量的作用域。而CSS变量在CSS层次结构中声明的位置，决定了它在整个层次结构中的可用性范围。

我们受限的可用性范围称为局部作用域，上述这个例子的变量就是一个局部作用域，位于它的上级层次结构中无法获取这个变量，只能供它的子级层次结构获取使用。与之相对的就是全局作用域

全局作用域

我们在编写代码的时候，对于一些变量我们需要全局都能够访问到它。

那怎么做呢？

答：将其变量声明在根标签的选择器中，我们一般用:root{}，这是一个伪类选择器，选中的是根元素，也就是html标签。我们在这里面声明的变量在全局下都能够访问，这样一个全局变量就声明成功了。

变量的默认值

我们在var()获取css变量时，有一种情况是所取得变量未被赋值，那么就会取我们设置得默认值。

写法：color:var(--color,"blue")

//意思就是--color，未取到值得时候，color取blue

当使用var()函数时，可以分配一个或多个回退的属性值（使用逗号分隔），比如设置字体：

html {
  font: var(--fonts, Helvetica, Arial, sans-serif);
}

当--fonts未取到值时，font得值就为  font: Helvetica, Arial, sans-serif

 还可以使用一连串的变量回退，但需要使用var()嵌套起来：

color:var(--color,var(--color1,"blue"))

//意思即为首先取--color,如果未取到就去取--color1，如果还没取到就是blue

 补充：css变量的值也可以为一个其它的css变量

变量提升

和JavaScript一样，CSS变量声明可以被提升，即CSS变量可以再声明之前使用他们。在浏览器渲染相应的HTML元素样式前，会将CSS变量的声明提升并移动到CSSOM的最顶部。