css变量容易忽略的点

1.引用变量值的var函数，可以指定第二个参数做为默认值（即当变量不存在时，使用该值），需注意的点

• 第二个参数不要加单双引号，正确的示例：var(--x,#fffff)
• 第二个参数中的空格不会被忽略 var(--margin,10px 20px)

2. 变量值的写法

• 变量值有单位时，不能写成字符串格式

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

• 引用变量值时，如果变量值是数值，则不能直接跟单位

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

.foo {
  --gap: 20;
  /* 有效 */
  margin-top:calc(var(--gap) * 1px);

}