css的var()函数

　　随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。

　　兼容性

　　css，以及浏览器的更新迭代下，浏览器过于新的或者过于旧的版本都是存在兼容的情况的。

　　使用方法

　　通过--  + 字段名：值（这个值可以是任何我们在css输入的值）进行定义类似的js的定义，调用时候通过var()函数进行对应的调用，如下面代码一样var(--字段名)进行调用

body {
    --size: 20px;
    font-size: var(--size);    // 20px
    padding:var(--size);       // 20px
}

　　如上面代码一样通过定义--size为20px，然后font-size和padding同时通过var()函数进行复用，同时将font-size和padding设置为20px。当然如果不一定是20px，也是可以通过计算进行对应的如calc(var(--size) * 2)，这样的话就相当于变成40px。但是这样写也是会有一点不好的就是，类似js的块级元素，在body{}里定义的的--size是无法在其他样式类名中进行调用的

.test{
    --size: 20px;
    font-size: var(--size);　　         // 20px
    padding:calc(var(--size) * 2)      // 40rpx
}

.test2{
    font-size: var(--size);　　　　     // 无法识别
}

　　但是也是有些需要注的地方，例如

// 错误写法
.test{
    --size: 20;
    font-size: var(--size)px;      // 这里的写法是错误，这样会读取成font-size:20 px,值的中间会多了一个空格，导致读取失败
}

// 正确写法
.test2{
    --size: 20px;
    --size2: 20;
    font-size: var(--size);
    font-size: calc(var(--size2) * 1px);
}

　　我们在使用var的时候会发现，在样式中定义的字段只能在某个样式中使用，类似es6的{}，在里面定义的只能在里面进行使用，为了更加便捷的使用，var()还是有公用定义字段的方法的。

　　通过在:root定义的字段，就相当于css中的全局变量，可以在css中任意的样式中进行使用

:root{
    --size:20px;
}

.test{
     font-size: var(--size);  // 20px
 }

.test2{
     font-size: var(--size);  // 20px
}

　　最后，如果你问我用sass和less去对比var()的话，我还是会用sass或者less，无论是可变性还是测试上都会比较方便，因为在使用var()定义的字段，在审查元素中的样式也只会显示--字段名，如果你是全局的话，就基本上去微调样式的时候，就会牵一发而动全身，这样无论是测试修改上，还是编写的时候，都会造成不必要的麻烦。当然最重要的还是浏览器的兼容性，都是预编译上的使用更加的合理。

 

转载于:https://www.cnblogs.com/tyusBlog/p/10975068.html