你需要知道的關於 CSS 變量的知識

當 Web 項目變得越來越大時，它們的 CSS 通常會變得異常龐大，並且常常變得凌亂。為了幫助我們解決這個問題，新的 CSS 變量很快就會出現在主流瀏覽器中，讓開發人員能夠重用和輕鬆編輯重複出現的 CSS 屬性。

我們已經在 Sass 和 Less 課程中向您展示了樣式表變量是多麼的棒，但這些都是預處理器，需要在使用前進行編譯。現在變量在 vanilla CSS 中可用，您可以立即在瀏覽器中使用它們！

定義和使用 CSS 變量

變量遵循與任何其他 CSS 定義相同的範圍和繼承規則。使用它們的最簡單方法是使它們全局可用，方法是將聲明添加到 :root 偽類，以便所有其他選擇器都可以繼承它。

:root{
    --awesome-blue: #2196F3;
}

要訪問變量中的值，我們可以使用 var(...) 句法。請注意，名稱區分大小寫，因此 --foo != --FOO .

.some-element{
    background-color: var(--awesome-blue);
}

支持

目前，只有 Firefox 支持開箱即用的 CSS 變量。但是，Google Chrome 49 及更高版本也將啟用該功能。如果您仍在使用舊版 Chrome 48，則可以通過轉到 chrome://flags/ 啟用此技術和其他一些新技術 並找到啟用實驗性 Web 平台功能 .您可以在此處獲取更多詳細信息 - 我可以使用 CSS 變量嗎。

下面是幾個示例，展示了 CSS 變量的典型用法。為確保它們正常工作，請嘗試在我們上面提到的瀏覽器之一上查看它們。

示例 1 - 主題顏色

當我們需要對多個元素反复應用相同的規則時，CSS 中的變量最有用，例如主題中的重複顏色。我們可以將它放在一個變量中並從那裡訪問它，而不是每次我們想重複使用相同的顏色時都複製和粘貼。

現在，如果我們的客戶不喜歡我們選擇的藍色陰影，我們可以只在一個地方（變量的定義）改變樣式來改變整個主題的顏色。如果沒有變量，我們將不得不手動搜索和替換每一次出現。

要讓此演示正常運行，請確保您使用的是這些瀏覽器之一。

:root{
    --primary-color: #B1D7DC;
    --accent-color: #FF3F90;
}

html{
    background-color: var(--primary-color);
}

h3{
    border-bottom: 2px solid var(--primary-color);
}

button{
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

<div class="container">
    <h3>Dialog Window</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate vitae nibh sed sodales. Maecenas non vulputate lacus, sed convallis eros. Cras sollicitudin, felis sit amet pharetra mattis, metus lectus ullamcorper magna.</p>
    <button>Confirm</button>
</div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    padding: 30px;
    font: normal 13px/1.5 sans-serif;
    color: #546567;
    background-color: var(--primary-color);
}

.container{
    background: #fff;
    padding: 20px;
}

h3{
    padding-bottom: 10px;
    margin-bottom: 15px;
}

p{
    background-color: #fff;
    margin: 15px 0;
}

button{
    font-size: 13px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    outline: 0;
}

button:hover{
    opacity: 1;
}

示例 2 - 屬性的人類可讀名稱

變量的另一個重要用途是當我們想要保存更複雜的屬性值時，我們就不必記住它了。很好的例子是帶有多個參數的 CSS 規則，例如 box-shadow , transform 和 font .

通過將屬性放在變量中，我們可以使用語義、人類可讀的名稱來訪問它。

要讓此演示正常運行，請確保您使用的是這些瀏覽器之一。

:root{
    --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}
li{
    box-shadow: var(--tiny-shadow);
}
li:hover{
    transform: var(--animate-right);
}

<ul>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
</ul>

html{
    background-color: #F9F9F9;
}
ul{
    padding: 20px;
    list-style: none;
    width: 300px;
}
li{
    font: normal 18px sans-serif;
    padding: 20px;
    transition: 0.4s;
    margin: 10px;
    color: #444;
    background-color: #fff;
    cursor: pointer;
}

示例 3 - 動態變化的變量

當一個自定義屬性被多次聲明時，標準的級聯規則有助於解決衝突，樣式表中最下面的定義會覆蓋它上面的定義。

下面的示例演示了在用戶操作上動態操作屬性是多麼容易，同時仍保持代碼清晰簡潔。

要讓此演示正常運行，請確保您使用的是這些瀏覽器之一。

.blue-container{
    --title-text: 18px;
    --main-text: 14px;
}
.blue-container:hover{
    --title-text: 24px;
    --main-text: 16px;
}
.green-container:hover{
    --title-text: 30px;
    --main-text: 18px;
}
.title{
    font-size: var(--title-text);
}
.content{
    font-size: var(--main-text);
}

<div class="blue-container">
    <div class="green-container">
        <div class="container">
            <p class="title">A Title</p>
            <p class="content">Hover on the different color areas to change the size of this text and the title.</p>
        </div>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    background: #eee;
    padding: 30px;
    font: 500 14px sans-serif;
    color: #333;
    line-height: 1.5;
}

.blue-container{
    background: #64B5F6;
    padding-left: 50px;
}

.green-container{
    background: #AED581;
    padding-left: 50px;
}

.container{
    background: #fff;
    padding: 20px;
}

p{
    transition: 0.4s;
}

.title{
    font-weight: bold;
}

更多提示

如您所見，CSS 變量使用起來非常簡單，開發人員無需花費太多時間就可以開始在任何地方應用它們。以下是我們在文章中留下的一些內容，但仍然值得一提：

• var() 函數有第二個參數，可用於在自定義屬性失敗時提供備用值：

  width: var(--custom-width, 20%);

• 可以嵌套自定義屬性：

  --base-color: #f93ce9;
  --background-gradient: linear-gradient(to top, var(--base-color), #444);

• 變量可以與 CSS 中最近添加的另一個功能 - calc() 函數結合使用。遺憾的是，這目前僅適用於 Firefox。

  --container-width: 1000px;
  max-width: calc(var(--container-width) / 2);

我們的文章到此結束！盡情嘗試這個新的 CSS 功能，但請記住，這仍然被認為是一項實驗性技術。目前，避免在嚴肅的項目中使用它，並始終提供備用。