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.6 js动态修改变量值 setProperty()

document.documentElement.style.setProperty('--color', 'red');

 

三、注意问题

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();
 }