css中var()语法的应用

var例子

:root{
	--white-max:  red; 
	--white-bright: #f5f5f5;
	--white-light: #eee; 
	--white-dark:  #ddd; 
}
h1{
	color: var(--white-max);
}

概述

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。

语法

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

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

值

< custom-property-name > 自定义属性名

在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。

< declaration-value > 声明值（后备值）

回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，例如var(–bg-color, --bs;color)是不合法的，而var(–bg-color, --value(bs;color))是合法的）。

:root {
  --size: 20px;
}
/*背景为红色————由于找不到变量，取后面的备用值*/
body {
  background-color: var(--1, red);
}
/*背景为transparent————变量值是不合法,用默认值*/
body {
  background-color: var(--size, red);
}
/*变量的值可以修改*/
.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

变量命名

“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”，不包含特殊字符，但是可以是中文，日文或者韩文