純 CSS 中的 CSS 變量 - 5 分鐘或更短時間開始

純 CSS 中的 CSS 變量（或正式名稱：自定義屬性）對於願意花 5 分鐘時間學習如何使用它們的人來說是一個巨大的節省時間。 它們從 CSS3 開始就已經存在，並且 92% 的用戶擁有支持它們的瀏覽器。 使用 CSS 變量不需要對現有樣式表或新工具進行任何重大更改，並且可以輕鬆應用於舊項目。 無需在文件中的數百個地方寫下十六進制顏色代碼，您可以只在一個地方定義它 - 使用 CSS 變量。 節省大量時間並有助於使樣式表更加一致。

等等，所以這是 Saas 或更少，對吧？

不，我們在這裡討論的是純 CSS，而不是 CSS 加上 Saas、Less 或 SCSS 等預處理器。 使用 CSS 變量不需要任何額外的工具、編輯器或對您的工作流程或您使用的任何其他內容進行更改。 因此，沒有變量的現有 CSS 文件不需要任何“特殊”更改，並且您可以混合和匹配 - 僅將變量用於文件的一部分，或者僅在某些文件中是您的項目。

像 Saas 或 Less 這樣的 CSS 預處理器也支持變量。 此外，它們還有更多您可以使用的功能和選項。 然而，顧名思義，它們需要一個預處理器——一種將用 Saas 編寫的 CSS 轉換為純 CSS 的工具。 如果你只需要變量——純 CSS 有你需要的一切。

CSS 變量是一個原生函數，這就是它們的偉大之處。 只需最少的努力，您的樣式表就更具可讀性和一致性。 此外，您以後必須進行的任何更改都更容易進行 -當您需要在數百個位置更改顏色代碼時，肯定比搜索和替換更快。

讓我們創建一些變量

與任何編程語言一樣，使用變量有兩個步驟：賦予它們值（定義它們）和使用它們（將它們放在需要該值的所有地方）。 我們也會這樣做；

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

如果你想在 CSS 文件中全局（任何地方）使用一個變量，你必須在:root偽類中定義它。 文件中的位置無關緊要。 它可以在文件的開頭或結尾。 但是，您必須將變量放入:root中。 名稱必須以雙破折號開頭--並且不能包含任何空格。 CSS 變量可以保存您通常分配給 CSS 屬性的任何值； 從顏色等簡單值到背景或陰影等速記屬性的複雜表達式。

要使用變量（獲取其值），請將其放在var()函數中。 不要忘記所有變量名都以--開頭。 這就是您開始時需要知道的一切。

使用後備值

如果未定義變量，則可以將後備值作為第二個參數提供給var()函數。

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

如果屬性值是一個複雜的值，請不要擔心。 fallback 參數允許使用逗號（參見box-shadow示例）。 它還允許鏈接多個var()函數，如.custom-text中的顏色所示。 如果--my-red和--my-blue變量未定義，則紅色將用作顏色。

結合var()和calc()也可以，語法上沒有任何意外。 這是一個示例，其中包含一個局部變量，該變量僅在定義它的類中可用。

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

謹慎使用calc() 。 這不是一件壞事，但是當過度使用時，調試和維護會很麻煩。

通過 JavaScript 獲取和設置 CSS 變量

通過使用純 JavaScript，您可以設置新的 CSS 變量並訪問它們的值。 我不使用這種方法。 相反，我更喜歡更改元素的類。 但是，如果您想通過 JavaScript 訪問 CSS 變量，這並沒有錯。 它在某些情況下肯定是有用的。 堅持使用 jQuery 的人，可以將代碼轉換為 jQuery 插件。

要創建一個新變量，或更改現有變量的值，請使用：

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

訪問變量有點複雜。 如果變量是通過 JS 定義的，那麼使用：

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

但是，如果它是通過 CSS 定義的（通常是這樣），請使用以下代碼：

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

需要注意的問題和事項

既然您知道如何使用變量，就不要過度使用它們並為樣式表中的每個屬性值創建一個變量。 例如，這將是對整個概念的過度殺傷和濫用；

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

你一無所獲。 剛得到--spacing-10而不是10px 。 您很快就會為從 5px 到 100px 的每個填充像素值創建另外 20 個變量。 如果您要保持一致性，請使用--small-padding, --medium-padding, --large-padding的概念並分配適當的數值。

儘管 CSS 標準沒有要求，但我全心全意地建議在一個位置和 CSS 文件的開頭定義所有變量。 這樣，您將始終知道它們在哪裡，並且可以迅速更改值。 如果您將定義分散在整個文件中，您將很難跟踪事物，並且最終可能會在多個位置定義相同的變量。 調試不會是一項有趣的任務。

沒有理由不使用 CSS 變量

在 Internet 上，事情發展得很快（例如 cookie 被本地存儲取代）。 對於大型項目和大型團隊來說，切換到像 Saas 這樣的 CSS 預處理器是正確的選擇。 但是，對於較小的項目或需要維護的現有項目，純 CSS 中的 CSS 變量是正確的解決方案。 它們完全不需要更改、軟件或工具升級或任何東西。 您定義一個變量並開始使用它。