css定义变量(定义:--aa;使用:var(--aa)、calc()计算样式函数

一、兼容性

2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。

二、用法

声明css变量的时候，变量名前面要加两根连词线（--）。
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

1.全局/局部变量

1.1 :root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

    :root { --color: blue; }.box{color: var(--color)}

1.2 局部变量

    .box{--color: red;color: var(--color);}

1.3 var()函数的第二个参数默认值

    .box{--color: red;color: var(--bg,pink);}

1.4 可以结合CSS3 calc()一起计算

p{--size: 20;   font-size: calc(var(--size) * 1px);//20px
}

1.5 CSS变量的继承(就近原则)

    <div class="box" id="alert">muzidigbig</div>

    :root { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }

三、注意问题

1.当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法。

2.变量的取值采用就近原则。

3.如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接。

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

4.如果变量值带有单位，就不能写成字符串。

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

5. CSS属性名是不可以使用变量的。例如下面写法是错误的：

body {--bc: background-color;    var(--bc): #369;
}

6. css变量是存在缺省值，只要定义正确，里面的值不对，结果以缺省值显示：如:

body {--color: 20px;background-color: #369;background-color: var(--color, #cd0000);/*背景色为：transparent*/
}

7. css变量默认尾部是有空格的。例如：

p{--size: 20;   font-size: var(--size)px;//等同于font-size:20 px;这里将使用元素默认的大小。这里可以结合上面例子calc()使用。
}

四、兼容性处理

别处理了放弃低版本浏览器吧。
检查是否兼容:说实话我是不想检测兼容的自己试呢反正都是最新的东西，等团队决定要用了兼容问题也不会太严重

a {color: #7F583F;color: var(--primary);
}
/* 用属性值得无效声明 */@supports ( (--a: 0)) {/* supported */
}
@supports ( not (--a: 0)) {/* not supported */
}
/* 也可以使用@support命令进行检测。 */const isSupported =window.CSS &&window.CSS.supports &&window.CSS.supports('--a', 0);if (isSupported) {/* supported */
} else {/* not supported */
}
/* JavaScript 检测浏览器是否支持 CSS 变量。 */

五、JavaScript 操作 CSS 变量的写法

    window.onload = function() {// 设置值document.body.style.setProperty("--primary","pink");// 读取值let primary = document.body.style.getPropertyValue("--primary");console.log(primary);// 删除变量;返回删除的变量值let delPrimary = document.body.style.removeProperty("--primary");console.log(delPrimary);}

补充知识：

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

.elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();}