[TOC] #### 1. 前言 --- 在 CSS 中，有很多需要反復使用的屬性值，如果每個使用的地方都直接寫死這個值，而沒有使用變量去定義這個值的話，后期修改起來會很麻煩。有很多人忽略了在 CSS 中也可以定義變量這個事情，相信你會愛上它 ！ CSS 使用變量有很多好處: 可以減少樣式代碼的重復性，增加樣式代碼的擴展性和靈活性 #### 2. 聲明變量 --- 聲明變量的時候，變量名前面要加兩根連詞線 `--` ```css :root { --color: #ff5722; --size: 25px; --shadow: 2px 2px 5px 1px rgba(143, 143, 143, .1) } ``` 上面代碼中，聲明了三個變量: `--color`、`--size`、`--shadow` 變量名大小寫敏感，例如: `--header` 和 `--Header` 是兩個不同的變量 它們與 `color`, `font-size` 等正式屬性沒有什么不同，只是沒有默認含義，所以 CSS 變量又叫做 **CSS 自定義屬性** 你可能會問，為什么選擇兩根連詞線（`--`）表示變量？因為 `$foo` 被 Sass 用掉了，`@foo` 被 Less 用掉了。為了不產生沖突，官方的 CSS 變量就改用兩根連詞線了。 #### 3. var() 函數 --- `var()` 函數用于讀取變量 ```css div { font-size: var(--size); box-shadow: var(--shadow); } ``` `var()` 函數還可以使用第二個參數，表示變量的默認值。如果變量不存在，就會使用這個默認值 ``` font-size: var(--size, 30px); ``` `var()` 函數還可以用在變量的聲明 ``` --big-size: var(--size); ``` 變量值只能作為屬性名，不能作為屬性值。下面代碼中，變量 `--side` 用作屬性名，這是無效的。 ```css .foo { --side: margin-top; /* 無效 */ var(--side): 20px; } ``` #### 4. 變量的作用域 --- 同一個 CSS 變量，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效，這與 CSS 的層疊規則是一致的 下面代碼中，三段文字的顏色是不一樣的 ```html <style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <p>藍色</p> <div>綠色</div> <div id="alert">紅色</div> ``` 變量的作用域就是它所在選擇器的有效范圍內 由于這個原因，全局的變量通常放在根元素 `:root` 里面，確保任何選擇器都可以讀取它們 ```css :root { --color: #ff5722; --size: 25px; --shadow: 2px 2px 5px 1px rgba(143, 143, 143, .1) } ```