前言

less或sass很早就出現(xiàn)變量的概念，但是本質上還是要編譯成css，缺少靈活性。css3變量就很容易擔任他們的職責，而且不需要安裝loader編譯。

變量的使用

• 使用--來定義css，并且在:后賦予變量初始值

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

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

變量的命名

• 區(qū)分大小寫

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

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

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

變量讀?。?code>var()函數(shù)）

• var()能夠傳入兩個參數(shù)，第一個為要使用的變量；第二個參數(shù)為默認值，如果參數(shù)一變量不存在，那么就會使用參數(shù)二這個默認值。

  :root {
      --red: red;
  }
  view {
      color: var(--red, yellow);
      /* 字體顏色為紅色，如果(--red)變量不存在，那么就使用參數(shù)二（yellow） */
  }
  

• var()函數(shù)用在變量的聲明

  :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的屬性值就是一個字符串 */
  }
  

• 值為數(shù)字

  :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變量， 會采用優(yōu)先級最高的規(guī)則 ，和css的權重規(guī)則一樣

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