css变量的声明和读取

1、css变量的声明

　　使用--声明变量（$被sass用掉了，@被less用掉了）

  <style>
    :root {
      --color: red;
    }
  style>

　　root为根元素，相当于给html设置了css变量

    /* :root 相当于 html */
    html {
      --color: red;
    }

2、变量的读取

　　通过val函数读取

    div {
      color: var(--color);
    }

　　val函数第二个参数，可选值，当变量不存在时读取第二个值

3、变量的类型

　　①当变量的类型为字符串时，可以与其他字符串拼接

    div::after {
      --text1: 'hello ';
      --text2: var(--text1) 'world';
      content: var(--text2, '萨瓦迪卡') '!'
    }

　　②当变量的类型为数字时，不能和单位直接拼接，需要用calc函数拼接

    div {
      color: var(--color, blue);
      --width: 50;
      width: calc(var(--width) * 1px);
      background-color: red;
    }

4、变量的作用域

　　变量的作用域就是它所在选择器的范围

　　当作用域内有多个同名变量，按优先级最高的生效，同样式生效的规则一致

　　全局的变量通常放在根元素:root里面，这样任何选择器都可以读取

5、响应式布局

    
  
  
    链接1
    链接2
  

6、兼容性处理

      div{
        color: red;
        color: val(--color);
      }

7、内联重新赋值css变量

　　通过getComputedStyle(document.documentElement).getPropertyValue('--c-999')可以获取到html标签中定义的--c-999变量

　　①此时div的颜色为#999

　　②style属性中可以重新定义--c-999的颜色

8、js操作

　　①通过setProperty设置css变量

　　②通过removeProperty删除css变量

　　③写一段在css中无用但在js中可以读取的代码