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

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

器均支持var()函数。那么，我们来看下var()函数的格式：

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

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

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

htmlbody {
background-color:var(--main-color);

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

htmlbody {
background-color:var(--main-color ， #acacac);

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

全局变量

全局变量可以在任何位置访问，可以通过:root选择器声明，匹配文档的根元素。其声明格式如下：
:root {
--main-color:#f2f2f2;
--default-font-size:14px;

htmlbody {
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;

使用【var|前端使用var()实现样式的自定义配置】使用就比较简单了，通过上述的示例，我们也可以发现了使用方式了，在css属性值中通过var包裹变量即可，也可以作为变量值表达式的一部分。
:root {
--max-width:1200px;

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

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