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手冊


更多CSS教程: