前端使用var()实现样式的自定义配置

var()函数可以实现将我们定义的CSS变量传递给属性，且var()函数有且今年用于属性值的设置。var()函数通常是配合css变量一起来使用，且不需要关心浏览器类型，现在的主流浏览器均支持var()函数。那么，我们来看下var()函数的格式：

var( <custom-property-name> , <declaration-value>? )  

• <custom-property-name>：自定义变量名，一般是以两个破折号开始的，如：

:root {
     --main-color:#fafafa;
}

html,body {
    background-color:var(--main-color);
}

• <declaration-value>：声明值（后备值），回退值被用来在自定义属性值无效的情况下保证函数有值。使用上述的示例：

html,body {
    background-color:var(--main-color，#acacac);
}

CSS 变量

在使用var()之前，我们需要先了解下CSS中的变量类型，一个各种变量类型的区别。CSS变量主要有两种：一种是全局变量，一种是局部变量。顾名思义，这两种变量的主要区别在于作用区间。

• 全局变量

全局变量可以在任何位置访问，可以通过:root选择器声明，匹配文档的根元素。其声明格式如下：

:root {
    --main-color:#f2f2f2;
    --default-font-size:14px;
}
html,body {
    margin:0;
    font-size:var(--default-font-size);
}

• 局部变量

局部变量可以在选择器中声明，并在选择器内使用，并可以随时修改，也可以配合media媒体查询进行修改。

.inner {
    font-size:var(--big-size,--default-font-size); // 默认使用 --big-size,这里--big-size还未设置，使用 --default-font-size
    --big-size:22px;
}

@media screen and (max-width: 950px) {
  .inner{
    --bing-size: 16px;
  }
}

使用

使用就比较简单了，通过上述的示例，我们也可以发现了使用方式了，在css属性值中通过var包裹变量即可，也可以作为变量值表达式的一部分。

:root {
   --max-width:1200px;
}

body > main {
    max-width:var(--max-width);
    border-radius:calc( var(--max-width) / 1000 );
}

合理使用CSS变量和var()函数可以帮助我们进行网站的主题配置也可以配合media查询进行多尺寸、多设配类型兼容。