CSS是現在網站建設一種語言，也是現在最為常用的建站方式。在CSS中存在真很多變量，這些變量可以讓建設網站更加便捷。CSS變量給我們很多相同的優(yōu)勢，經典的變量提供了編程語言：方便、代碼可重用性、更可讀的代碼庫、提高預防錯誤措施。

    例如：

    :root {
           base-font-size: 16px;
           link-color: #6495ed;
           }
    p {
       font-size: var( --base-font-size );
      }
    a {
       font-size: var( --base-font-size );
       color: var( --link-color );
       }

    第一，基礎知識。

    CSS有三個主要組件時，你應該知道使用CSS變量：

    1、自定義屬性

    2、var()Functİon

    3、:root偽類

    4、自定義屬性

    我們已經知道這個標準類的CSS屬性包含了color、 margin、width以及font-size。那么下面的例子使用了colorCSS屬性：

    body {color: #000000; /* The "color" CSS property */}

    自定義屬性只是意味著我們作者定義屬性的名字，定義一個自定義屬性名稱，我們需要用兩個破折號（前綴--）。如果我們想要創(chuàng)建一個自定義屬性的名稱text-color有黑色的顏色值（#000000十六進制代碼），這就是我們可以做的：

    :root {--text-color: #000000; /* A custom property named "text-color" */}

    var()函數，為了讓我們的自定義屬性應用于我們的工作，我們必須使用 var()Functİon，否則瀏覽器不會知道他們的存在。如果我們想使用這些，我們就會知道其價值--text-color自定義屬性在我們 p、 h1、 h2這樣式規(guī)則，然后我們需要使用 var()函數如下：

    :root { --text-color: #000000; }
    p {
       color: var( --text-color );
       font-size: 16px;
       }
    h1 {
        color: var( --text-color );
        font-size: 42px;
       }
    h2 {
        color: var( --text-color );
        font-size: 36px;
        }

    上面的例子是相當于：

    p {
       color: #000000;
       font-size: 16px;
       }
    h1 {
        color: #000000;
        font-size: 42px;
        }
    h2 {
        color: #000000;
        font-size: 36px;
        }

    :root偽類，我們需要一個地方來把我們的自定義屬性。我們可以指定自定義屬性在任何樣式規(guī)則，但很多時候不是一個好主意，因為指定自定義屬性到處是禮物可維護性和CSS-readability挑戰(zhàn)。:root偽類代表了頂級的HTML文檔。這把我們的自定義屬性選擇器是一個很好的地方，因為我們可以通過這些預見覆蓋自定義屬性值其他更有特異性的CSS選擇器。

    CSS變量的好處，可維護性。在這給定web開發(fā)項目中，我們常常會重用特定CSS屬性值。我們會經常重用colors，line heights，margins，font sizes等變量值。

    這里有四個樣式規(guī)則的一個例子可能會受益于CSS變量：

    h1 {
        margin-bottom: 20px;
        font-size: 42px;
        line-height: 120%;
        color: gray;
        }
    p {
       margin-bottom: 20px;
       font-size: 18px;
       line-height: 120%;
       color: gray;
       }
    img {
         margin-bottom: 20px;
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: 20px;
              border: 3px solid gray;
              border-radius: 5px;
              }

    問題表面這就當我們需要改變某些屬性值。如果我們手動更改這個值，它可能需要我們大量的時間，還有一個巨大的機會我們將這個錯誤地方，尤其是我們的樣式表是巨大的。同樣的，如果我們執(zhí)行一個批處理查找和替換，我們可能會無意中這就會影響其他樣式規(guī)則。

    我們可以使用CSS變量改寫上面的例子：

    :root {
           --base-bottom-margin: 20px;
           --base-line-height:   120%;
           --text-color:         gray;
           }
    h1 {
        margin-bottom: var( --base-bottom-margin );
        font-size: 42px;
        line-height: var( --base-line-height );
        color: var( --text-color );
        }
    p {
       margin-bottom: var( --base-bottom-margin );
       font-size: 18px;
       line-height: var( --base-line-height );
       color: var( --text-color );
       }
    img {
         margin-bottom: var( --base-bottom-margin );
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: var( --base-bottom-margin );
              border: 1px solid gray;
              border-radius: 5px;
              color: var( --text-color );
             }

    現在想象一下你的客戶說你屏幕上的文字是難以閱讀，因為文本的顏色太輕了。在這種情況下，我們只需要更新在我們的CSS這一行：--text-color: black;

    這-66%少一行代碼編輯，在以前的樣式規(guī)則集的上下文中一行與行。同樣，使用CSS變量讓我們更容易，當我們想與我們的實驗設計。當我們開發(fā)這個項目，我們可以快速測試的顏色值、目的和底部邊距值都在一個地方，我們可以看到整體的影響。

    CSS改善可讀性，自定義屬性可以幫助使我們的樣式表達易于閱讀，它可以使我們的CSS屬性聲明更有意義。比較：

    background-color: yellow;
    font-size: 18px;

    相對于這個：

    background-color: var( --highlight-color );
    font-size: var( --base-font-size );

    定義屬性的名字--base-font-size和--highlight-color甚至當我們閱讀別人的代碼時，我們立刻知道屬性值在做什么。要記住的事情和大小寫敏感，自定義屬性區(qū)分大小寫（與常規(guī)CSS屬性）。

    :root {
           --main-bg-color: green;
           --MAIN-BG-COLOR: RED;
           }
    .box {background-color: var( --main-bg-color ); /* green background */}
    .circle {
             BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
             border-radius: 9999em;
             }

    .box,
    .circle {
             height: 100px;
             width: 100px;
             margin-top: 25px;
             box-sizing: padding-box;
             padding-top: 40px;
             text-align: center;
             }
    在上面的例子中，實際上有兩個已定義的自定義屬性：--main-bg-color和--MAIN-BG-COLOR。

    自定義屬性值的決議，當一個自定義屬性被聲明為不止一次分配遵循正常的CSS層疊和繼承規(guī)則。在下面的示例中，該鏈接將被指派的顏色red因為.container選擇器相比有更高的特異性:root和 body。

    html
    <body>
    <div class="container">
    <a href="">Link</a>
    </div>
    </body>

    CSS

    :root {--highlight-color: yellow;}
    body {--highlight-color: green;}
    .container {--highlight-color: red;}
    a {color: var( --highlight-color );}

    然而，如果我們刪除.container從我們的代碼樣式規(guī)則，鏈接將被指派的顏色green因為body成為下一個選擇器匹配我們的鏈接。

    回退值，你可以分配一個后備屬性值時使用var()函數表示法。簡單地提供后備屬性值作為一個額外的參數用逗號劃（,）。在以下示例中，.box元素應該是呈現黑色背景。然而，由于有一個錯誤引用自定義屬性的名字時，使用這個呈現背景將這個回退值（即red）。

    html
    <div class="box">A Box</div>

    CSS
    div { --container-bg-color: black;}
    .box {
          width: 100px;
          height: 100px;
          padding-top: 40px;
          box-sizing: padding-box;
          background-color: var( --container-bf-color, red );
          color: white;
          text-align: center;
          }

    避免這種情況的一個好方法就是想出描述性定義屬性的名稱。例如，命名上面的自定義屬性--small-button-width使其不當使用不太可能。

    (轉載請注明轉自：m.flw114.cn/news/n1643.htm，謝謝!珍惜別人的勞動成果，就是在尊重自己!）