CSS變量（自定義屬性）

探索CSS自定義屬性，也稱為CSS變量，這是現代瀏覽器的強大新功能，可幫助您編寫更好的CSS

介紹

在過去的幾年中，CSS預處理器取得了很大的成功。對於新項目，通常以Less或SASS開始。而且它仍然是一種非常流行的技術。

我認為這些技術的主要優點是：

它們允許嵌套選擇器
提供簡單的導入功能
他們給你變量

現代CSS具有一項新的強大功能，稱為CSS自定義屬性，也稱為CSS變量。

CSS不是像JavaScript，Python，PHP，Ruby或Go，其中變量是執行有用操作的關鍵。 CSS的功能非常有限，它主要是一種聲明性語法，用於告訴瀏覽器如何顯示HTML頁面。

但是變量是變量：名稱是指值，而CSS中的變量通過集中值的定義來幫助減少CSS中的重複和不一致。

它引入了CSS預處理器永遠不會擁有的獨特功能：您可以使用JavaScript以編程方式訪問和更改CSS變量的值。

使用變量的基礎

CSS變量使用特殊語法定義，前面有兩個破折號到一個名字（--variable-name），然後是一個冒號和一個值。像這樣：

:root {
  --primary-color: yellow;
}

（更多關於:root之後）

您可以使用以下方式訪問變量值var()：

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

變量值可以是任何有效的CSS值，例如：

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

在任何元素內創建變量

CSS變量可以在任何元素內定義。一些例子：

:root {
  --default-color: red;
}
body {
–default-color: red;
}
main {
–default-color: red;
}
p {
–default-color: red;
}
span {
–default-color: red;
}
a:hover {
–default-color: red;
}

這些不同示例的變化是範圍。

變量範圍

將變量添加到選擇器使它們可用於所有選擇器。

在上面的示例中，您看到了:root定義CSS變量時：

:root {
  --primary-color: yellow;
}

:root是CSS偽類，用於標識樹的根元素。

在HTML文檔的上下文中，使用:root選擇器指向html元素，除了:root有更高特異性（優先）。

在SVG圖片的背景下，:root指向svg標籤。

將CSS自定義屬性添加到:root使它可用於頁面中的所有元素。

如果您在.container選擇器，僅適用於.container：

.container {
  --secondary-color: yellow;
}

並且在此元素之外使用它將無法正常工作。

變量可以是重新分配：

:root {
  --primary-color: yellow;
}
.container {
–primary-color: blue;
}

外部.container，--primary-color將黃色的，但裡面是藍色。

您還可以使用以下方法在HTML中分配或覆蓋變量：內聯樣式：

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

CSS變量遵循常規CSS級聯規則，其優先級根據特異性

使用JavaScript與CSS變量值進行交互

CSS變量最酷的地方是可以使用JavaScript訪問和編輯它們。

使用純JavaScript設置變量值的方法如下：

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

如果變量是在以下位置定義的，則下面的代碼可用於訪問變量值：:root：

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

或者，如果將變量設置為不同的範圍，則將樣式應用於特定元素：

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

處理無效值

如果將變量分配給不接受該變量值的屬性，則認為該變量無效。

例如，您可以將像素值傳遞給position屬性或顏色屬性的rem值。

在這種情況下，該行被視為無效並被忽略。

瀏覽器支持

瀏覽器對CSS變量的支持為非常好，根據我可以使用。

CSS變量將保留下來，如果您不需要支持Internet Explorer和其他瀏覽器的舊版本，則可以在今天使用它們。

如果您需要支持較舊的瀏覽器，則可以使用類似的庫的CSS或者神話，但是您將失去通過JavaScript或瀏覽器開發人員工具與變量進行交互的功能，因為它們已被轉換為良好的老式無變量CSS（因此，您失去了CSS變量的大部分功能）。

CSS變量區分大小寫

此變量：

--width: 100px;

不同於：

--Width: 100px;

CSS變量中的數學

要在CSS變量中進行數學運算，您需要使用calc()，例如：

:root {
  --default-left-padding: calc(10px * 2);
}

使用CSS變量進行媒體查詢

這裡沒什麼特別的。 CSS變量通常適用於媒體查詢：

body {
  --width: 500px;
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
–width: 800px;
}
.container {
width: var(–width);
}

為var（）設置後備值

var()接受第二個參數，這是未設置變量值時的默認後備值：

.container {
  margin: var(--default-margin, 30px);
}

免費下載我的CSS手冊