本頁面由 Cloud Translation API 翻譯而成。

CSS 變數 - 重要性

Rob Dodson

更準確的 CSS 變數稱為 CSS 自訂屬性。有助於減少 CSS 中的重複情形也能提供強大的執行階段效果，例如主題切換擴充/聚合未來的 CSS 功能

CSS 混亂

設計應用程式時，常常會規定要保留一組品牌資訊並重複使用，確保應用程式的外觀一致。您必須在 CSS 中一再重複這些顏色值不僅是瑣事，還容易出錯如果我們在特定時間點身體需要改變，因此風力和尋找與取代時可能必須小心但若是規模夠大的專案這種做法可能很容易產生危險

最近許多開發人員改用 CSS 預先處理工具，例如 SASS 「較少」可透過使用預先處理器變數解決這項問題。雖然這些工具帶給開發人員莫大的生產力，以及他們有很大的缺點也就是靜態的在執行階段變更。新增在執行階段變更變數的功能，而不僅僅是就能享有動態應用程式主題設定等技術回應式設計的影響，以及支援 polyfill 未來 CSS 的可能性接著介紹網際網路通訊層包括兩項主要的安全防護功能隨著 Chrome 49 發布，下列功能現在都適用於 CSS 自訂屬性的形式

自訂屬性總覽

自訂屬性會在 CSS 工具箱中加入兩項新功能：

可讓作者將任意值指派給具有位作者選擇的名稱。
var() 函式：可讓作者在其他資料中使用這些值資源。

請看這個簡單的示範

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color 是作者定義的自訂屬性，其值為 #06c。注意事項所有自訂屬性都以兩個破折號開始

var() 函式會擷取自訂屬性，並將其取代為自訂屬性值來產生 color: #06c;，只要已定義自訂屬性應該可供 var 函式使用。

語法一開始可能有點奇怪。許多開發人員會問「$foo」當成變數名稱嗎？」具體來說，且日後可能允許使用 $foo 巨集。如要瞭解背景故事，請參閱這篇文章來自其中一位規格作者 Tab Atkins 的作品。

自訂屬性語法

自訂屬性的語法非常簡單明瞭。

--header-color: #06c;

請注意，自訂屬性會區分大小寫，因此 --header-color 和 --Header-Color 是不同的自訂屬性。儘管在自訂屬性可以使用的語法其實很有效。舉例來說，有效的自訂屬性如下：

--foo: if(x > 5) this.width = 10;

這個變數對變數沒有幫助，因為如果任何一項都無效，但可能在位於執行階段。這表示自訂屬性可能可以解鎖但現今的 CSS 預先處理工具目前不具備某些有趣的技巧。以下內容如果你在思考一下「打哈欠，我就有誰在乎...」，那請再看一下吧！但這不是您習慣使用的變數。

瀑布

自訂屬性遵循標準階層式規則，因此您可以定義相同指派不同精細程度的資源

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

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

這表示您可以利用媒體查詢的自訂屬性來協助採用回應式設計其中一種用途是螢幕尺寸增加時，主要區塊的元素會：

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

請注意，以上程式碼片段現今的 CSS 預先處理工具無法定義媒體中的變數舉個簡單的例子，您可以定義情境並指示 AI 如何回應服務中心查詢有能力釋放許多潛能！

也有可能是自訂屬性從其他項目取得值自訂屬性這在設定主題時非常實用：

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

var() 函式

如要擷取並使用自訂屬性的值，您需要在 var() 函式。var() 函式的語法如下所示：

var(<custom-property-name> [, <declaration-value> ]? )

其中 <custom-property-name> 是作者定義的自訂屬性名稱。例如 --foo，而 <declaration-value> 是參照的自訂屬性無效。備用值可以逗號分隔清單，並合併為單一值。例如 var(--font-stack, "Roboto", "Helvetica"); 定義 "Roboto", "Helvetica" 的備用項目。保留請注意，簡略值 (例如用於邊界和邊框間距的值) 並未採用因此，適當的邊框間距備用看起來會像這樣

p {
    padding: var(--pad, 10px 15px 20px);
}

使用這些備用值，元件作者可以為元素：

/* In the component’s style: */
.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 isn’t set,
        and so remains blue,
        the fallback value */
}

對使用陰影的網頁元件設定主題時，這項技術特別實用 DOM 是自訂屬性，可以掃遍陰影界線。Web Component 作者可以使用備用值進行初始設計，並在設計時顯示「掛鉤」您可以自訂屬性

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

使用 var() 時，請留意幾個問題。變數不得為屬性名稱。例如：

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

不過，這與設定 margin-top: 20px; 不同。相反地第二個宣告無效，系統會擲回錯誤。

同理，您也無法 (單純) 為自身的部分提供值變數：

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

同樣地，這與設定 margin-top: 20px; 不同。如要建立值，您需要其他：calc() 函式。

使用 calc() 建構值

如果您從未使用過這個方法，calc() 函式並不簡單工具，即可進行計算來判斷 CSS 值。這是所有新版瀏覽器支援，可以結合運用以建構新的值例如：

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

在 JavaScript 中使用自訂屬性

如要在執行階段取得自訂屬性的值，請使用 getPropertyValue() 方法。

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

同樣地，如要在執行階段設定自訂屬性的值，請使用 CSSStyleDeclaration 物件的 setProperty() 方法。

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

您也可以設定自訂屬性的值來參照其他自訂屬性值呼叫 var() 函式， setProperty()。

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

因為自訂屬性可參照想像一下，這可能會如何引人注目執行階段效果

瀏覽器支援

Chrome 49、Firefox 42、Safari 9.1 和 iOS Safari 9.3 目前支援自訂作業系統資源。

示範

試試看範例瞭解目前有哪些有趣的技巧自訂屬性

延伸閱讀

如要進一步瞭解自訂資源，請前往下列連結： Google Analytics 團隊撰寫了「為何他對自訂資源很期待」文章也可以在其他瀏覽器中掌握電腦進度 chromestatus.com.