CSS3变量

前言

less或sass很早就出现变量的概念，但是本质上还是要编译成css，缺少灵活性。css3变量就很容易担任他们的职责，而且不需要安装loader编译。

变量的使用

• 使用--来定义css，并且在:后赋予变量初始值

• 在使用变量的地方只需要使用var()包裹变量即可使用

  :root {
      --red: red;
  }
  view {
      color: var(--red);
  }
  

变量的命名

• 区分大小写

  :root {
      --red: red;
      --Red:yellow;
  }
  

• 不能使用非法字符（除开_``-）

  :root {
      --re#d: red;   /* 无效 */
      --red_d:red;   /* 可以使用 */
  }
  

变量读取（var()函数）

• var()能够传入两个参数，第一个为要使用的变量；第二个参数为默认值，如果参数一变量不存在，那么就会使用参数二这个默认值。

  :root {
      --red: red;
  }
  view {
      color: var(--red, yellow);
      /* 字体颜色为红色，如果(--red)变量不存在，那么就使用参数二（yellow） */
  }
  

• var()函数用在变量的声明

  :root {
      --red: red;
      --fRed:var(--red);   /* (--red)和(--fRed)存取的值是一样 */
  }
  

• var()的值只能当作css属性的值，不能做属性名称

  :root {
      --red: color;
  }
  view {
    var(--red): red;  /* 这样是无效的 */
  }
  

变量的值类型

• 值为字符串

  :root {
      --red: "red";
  }
  view {
      color: var(--red);   /* 无效的，因为（--red）只是字符串，不是css的关键字属性 */
  }
  view::after{
      cotent:var(--red);  /* 这样是可以的，因为content的属性值就是一个字符串 */
  }
  

• 值为数字

  :root {
      --size: 20;
  }
    view {
      font-size: var(--size)px; /* 无效，不能和单位直接拼接 */
      
      font-size: calc(var(--size)*1px);/* 正确 */
  }
  

• 值为css合法属性值(都可以正常使用)

  :root {
      --size: 20px;
      --color:red;
      --hidden: hidden;
  }
  

变量的作用域

• :root代表全局作用域，全局都有效

• 使用css变量， 会采用优先级最高的规则 ，和css的权重规则一样

  :root {
     --color: red;
  }
  
  view {
      --color: yellow;
  }
  
  view.cs {
      color: var(--color);
  }