CSS自定義變量屬性——像less，sass那樣在css中使用變量（譯）

介紹

一般大型文檔或者應用（甚至小規模的文檔或應用）會包括大量的CSS。在這些CSS文件中一般會有大量相同的數據；例如，一個網站可能用了一個顏色主題並反覆用三到四種顏色貫穿始終。改動這些數據會很是困難而且容易出錯，由於它零散地分佈在CSS文件（甚至多個文件）中，可能沒法使用尋找替換實現。

因而CSS自定義變量屬性應運而生，它容許用戶使用特定語法定義相關變量，並在必定範圍內反覆使用var()引用，改動這些變量，引用這些變量的地方的CSS也將對應地發生變化。

親測：ios9環境下沒有效果，ios9不支持ES56，推測與此有關 2017-11-5注。

語法

定義自定義屬性：--*

以--開頭，後加變量名，具備繼承性，適用於全部元素，計算屬性，不適用於動畫

Name:             --*
Value:            <declaration-value>
Initial:          (nothing, see prose)
Applies to:       all elements
Inherited:        yes
Percentages:      n/a
Media:            all
Computed value:    specified value with variables substituted (but see prose for "invalid variables")
Canonical order:   per grammar
Animatable:            no

使用舉例

1. 初步使用

   :root {
        --main-color: #06c;
        --accent-color: #006;
      }
      /* The rest of the CSS file */
      #foo h1 {
        //引用變量
        color: var(--main-color);
      }

   如下使用方法錯誤！！！

   他錯誤地嘗試使用變量名代替屬性名：
      .foo {
        --side: margin-top;
        var(--side): 20px;
      }
    這並不能實現`margin-top: 20px`，會拋出語法錯誤。

2. 大小寫敏感
   儘管--FOO與--foo都是合法的變量，可是當你引用前者指代的就是前者的值，後者亦然。

   h1 {
       --font-color: lightblue;
       --Font-color: lightgreen;
       color: var(--Font-color);
       //lightgreen
   }

3. 設置值的注意事項

   自定義屬性能夠以!important結尾, 可是CSS解析器會自動移除這個屬性的值，並按瀑布流的形式肯定其優先屬性。換句話說，雖然可使用!important,可是頂級優先「!」的禁止其它同類CSS生效的做用並無實現CSS。

   h1 {
       --font-color: lightblue!important;
       --Font-color: lightgreen;
       color: var(--font-color);
       color: var(--Font-color);
       //lightgreen
       }

4. 繼承性與優先級(可正常理解)

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

<p>I inherited blue from the root element!</p> //blue
<div>I got green set directly on me!</div>        //green
<div id='alert'>
  While I got red set directly on me!     //red
  <p>I’m red too, because of inheritance!</p>  //red
</div>
```

1. 可與正常屬性混用

   :root {
     --main-color: #c06;
     --accent-background: linear-gradient(to top, var(--main-color), white);
   }

2. 互相調用無效

   body {
               font-size: 16px;
           }
           //h1最終大小爲16px
           h1 {
               --font-color: lightblue!important;
               --Font-color: lightgreen;
               --one: calc(var(--two) + 30px);
               --two: calc(var(--one) - 50px);
               color: var(--font-color);
               color: var(--Font-color);
               font-size: var(--one);
           }

   在不一樣範圍內合法，事實上二者在不一樣範圍內指代了不一樣的變量

   <one><two><three /></two></one>
      one   { --foo: 10px; }   //10
      two   { --bar: calc(var(--foo) + 10px); } //20
      three { --foo: calc(var(--bar) + 10px); } //30

   calc()使用通用的數學運算規則，可是也提供更智能的功能：

   • 使用「+」、「-」、「*」 和 「/」四則運算；

   • 可使用百分比、px、em、rem等單位；

   • 能夠混合使用各類單位進行計算；

   • 表達式中有「+」和「-」時，其先後必需要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

   • 表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

3. 變量初始默認值

   .component .header {
        color: var(--header-color, blue);
      }
      .component .text {
        color: var(--text-color, black);
      }
      
      /* In the larger application’s style: */
      .component {
        --text-color: #080;
        /* header-color 爲默認值blue
        注： var(--header-color, blue， red)無效
        */
      }

4. 變量的替換使用規範
   var()並非按照原文替換CSS字符

   .foo {
            --gap: 20;
            margin-top: var(--gap)px;
          }

   這沒法設置 margin-top: 20px;(a length),而是等同於 margin-top: 20 px; (a number followed by an ident空格),這是一個不合法的屬性值. 不過, calc() 能夠實現:

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

   下面的代碼從語法上江是無錯誤的，可是並沒有實際效果。由於20px並非一個背景色的有效值，若是沒有其餘設置(必須優先級高於這裏的設置)或繼承的背景色，將會使用全局默認的透明背景色。

   :root { --not-a-color: 20px; }
          p { background-color: red; }
          p { background-color: var(--not-a-color); }

//這裏雖然有背景色的設置可是優先級並無自定義屬性的高，故而`p`的背景色是透明色

翻譯參考：

• https://drafts.csswg.org/css-...