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

    例如：

    :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 );
       }

    第一，基礎(chǔ)知識(shí)。

    CSS有三個(gè)主要組件時(shí)，你應(yīng)該知道使用CSS變量：

    1、自定義屬性

    2、var()Functİon

    3、:root偽類(lèi)

    4、自定義屬性

    我們已經(jīng)知道這個(gè)標(biāo)準(zhǔn)類(lèi)的CSS屬性包含了color、 margin、width以及font-size。那么下面的例子使用了colorCSS屬性：

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

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

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

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

    :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;
        }

    上面的例子是相當(dāng)于：

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

    :root偽類(lèi)，我們需要一個(gè)地方來(lái)把我們的自定義屬性。我們可以指定自定義屬性在任何樣式規(guī)則，但很多時(shí)候不是一個(gè)好主意，因?yàn)橹付ㄗ远x屬性到處是禮物可維護(hù)性和CSS-readability挑戰(zhàn)。:root偽類(lèi)代表了頂級(jí)的HTML文檔。這把我們的自定義屬性選擇器是一個(gè)很好的地方，因?yàn)槲覀兛梢酝ㄟ^(guò)這些預(yù)見(jiàn)覆蓋自定義屬性值其他更有特異性的CSS選擇器。

    CSS變量的好處，可維護(hù)性。在這給定web開(kāi)發(fā)項(xiàng)目中，我們常常會(huì)重用特定CSS屬性值。我們會(huì)經(jīng)常重用colors，line heights，margins，font sizes等變量值。

    這里有四個(gè)樣式規(guī)則的一個(gè)例子可能會(huì)受益于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;
              }

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

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

    :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 );
             }

    現(xiàn)在想象一下你的客戶(hù)說(shuō)你屏幕上的文字是難以閱讀，因?yàn)槲谋镜念伾p了。在這種情況下，我們只需要更新在我們的CSS這一行：--text-color: black;

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

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

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

    相對(duì)于這個(gè)：

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

    定義屬性的名字--base-font-size和--highlight-color甚至當(dāng)我們閱讀別人的代碼時(shí)，我們立刻知道屬性值在做什么。要記住的事情和大小寫(xiě)敏感，自定義屬性區(qū)分大小寫(xiě)（與常規(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;
             }
    在上面的例子中，實(shí)際上有兩個(gè)已定義的自定義屬性：--main-bg-color和--MAIN-BG-COLOR。

    自定義屬性值的決議，當(dāng)一個(gè)自定義屬性被聲明為不止一次分配遵循正常的CSS層疊和繼承規(guī)則。在下面的示例中，該鏈接將被指派的顏色red因?yàn)?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因?yàn)閎ody成為下一個(gè)選擇器匹配我們的鏈接。

    回退值，你可以分配一個(gè)后備屬性值時(shí)使用var()函數(shù)表示法。簡(jiǎn)單地提供后備屬性值作為一個(gè)額外的參數(shù)用逗號(hào)劃（,）。在以下示例中，.box元素應(yīng)該是呈現(xiàn)黑色背景。然而，由于有一個(gè)錯(cuò)誤引用自定義屬性的名字時(shí)，使用這個(gè)呈現(xiàn)背景將這個(gè)回退值（即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;
          }

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

    (轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自：mjyil.cn/news/n1643.htm，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）