探索 CSS 自訂屬性,也被稱為 CSS 變數,這是現代瀏覽器的強大新功能,幫助您編寫更好的 CSS
- 介紹
- 使用變數的基礎知識
- 在任何元素內建立變數
- 變數的作用範圍
- 使用 JavaScript 互動 CSS 變數值
- 處理無效值
- 瀏覽器支援
- CSS 變數區分大小寫
- CSS 變數中的數學計算
- 使用 CSS 變數進行媒體查詢
- 為 var() 設定備用值
介紹
過去幾年,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;
}
在這些不同的示例中變化的是作用範圍。
變數的作用範圍
將變數添加到選擇器中,使它們對所有子元素可用。
在上面的示例中,您看到了在定義 CSS 變數時使用了 :root
:
:root {
--primary-color: yellow;
}
:root
是一個 CSS 虛擬類,它標識樹的根元素。
在 HTML 文檔的上下文中,使用 :root
選擇器指向 html
元素,只是 :root
具有更高的優先級。
在 SVG 圖像的上下文中,:root
指的是 svg
標籤。
在 :root
添加 CSS 自訂屬性使其在頁面上的所有元素中都可用。
如果您在 .container
選擇器內添加變數,它只會對 .container
的子元素可用:
.container {
--secondary-color: yellow;
}
在此元素外部使用它將無效。
變數可以被重新賦值:
:root {
--primary-color: yellow;
}
.container {
--primary-color: blue;
}
在 .container
外部,--primary-color
將是 yellow,但在其中將是 blue。
您還可以使用 內联样式(inline styles) 在 HTML 內部分配或覆寫變數:
<main style="--primary-color: orange;">
<!-- ... -->
</main>
使用 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 變數的瀏覽器支援是非常好的,根據 Can I Use 的說法。
CSS 變數已經趨於穩定,如果您不需要支援 Internet Explorer 和舊版其他瀏覽器,現在就可以使用它們。
如果您需要支援舊版瀏覽器,可以使用像 PostCSS 或 Myth 這樣的庫,但您將失去通過 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);
}