CSS自定义变量

css是可以支持变量的，且所有主流浏览器都支持。css变量又称 “css自定义属性”，css的变量声明是以--前缀，而前缀是$或@被预处理器 sass 或 less 占用，所以，css以--开头可以避免与预处理器产生冲突

1. css的变量是区分大小写的，--primary-size和--Primary-Size是完全不同的

2. 属性名可以包含数字、字母、以及下划线或者短横线，也可以是中文、日文、或者韩文，但不能是属性名或数字开头，不能包含$, [, ^, (, %等字符

3. 变量--primary只能用属性值，不能用属性名

.foo {
	--primary: margin-top; /* 无效 */
	var(--primary): 2px;
}

4. 数字和单位直接写在一起，需要使用calc函数

--gap: 20;
  margin-top: calc(var(--gap) * 1px);

 /**错误的方式**/
--font-size:10px *3;
--sum:'10px';
 padding-top:var(--sum) /*不能是字符串，否则失效*/

/**正确的方式**/
--font-size:calc(10px *3);
--sum:10px；
 padding-top:var(--sum)

注意：calc函数支持四则运算（+, -, *, /），运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc函数进行计算；calc函数使用标准的数学运算优先级规则

5. 变量的值是字符串时，可以直接拼接

:root{
  --screen-category: 'category'  //变量值是字符串
}
body:after {
  content: '--screen-category: 'var(--screen-category);  // 直接拼接
}

6. var函数的第二个参数是设置默认值，若该参数不存在，则使用此默认值

color: var(--foo, #7F583F);

7. css变量可以在任意选择器中使用包括在标签元素style及@media中

/**style*/
.wrapper .card {
	animation: animate 15s linear infinite;
	animation-delay: calc(3s * var(--delay));
}

<div class="card" style="--delay:1"></div>

/**@media*/

:root{
    --column-size:4;
}

@media screen and (min-width: 1200px) {
    :root{
        --column-size: 3;
    }
}