最佳答案
一、什麼是CSS自定義屬性
CSS自定義屬性，也被稱為CSS變量，是一種容許開辟者定義跟復用值的機制。它容許我們在CSS中創建本人的變量，並在全部文檔或特定部分中重複利用這些變量。這種機制進步了款式的可保護性跟可讀性。
二、背景
在CSS中，我們常常須要重複利用雷同的值，如色彩、字體大小、邊距等。這些值被稱為「把戲數字」，它們缺乏語義，不易於管理跟保護。CSS自定義屬性的呈現，使得我們可能將這些值定義為變量，從而簡化代碼並進步可保護性。
三、感化
- 進步代碼可讀性：利用有意思的變量名調換把戲數字，使代碼更易於懂得跟保護。
- 簡化款式修改：只有在一個處所修改變量的值，全部利用該變量的款式都會主動更新。
- 加強復用性：可能在差其余CSS規矩會合復用雷同的變量值。
四、利用方法
4.1 申明
CSS變量的申明利用兩個連字符（–）掃尾，前面跟着屬性名跟冒號，再跟上屬性值。平日在:root偽類中抉擇器下申明全局變量。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
}
4.2 利用
利用var()函數來引用CSS變量。可能將變量值作為任何CSS屬性的值。
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
4.3 默許值
可能為CSS變量設置默許值，以便在變量不決義時利用。
body {
background-color: var(--main-color, #fff);
}
4.4 感化域
CSS變量存在感化域，平日在定義它們的元素及其子元素中可用。假如在一個元素內重新定義一個變量，那麼該新值將僅在該元素及其子元素內有效。
4.5 空格尾隨特點
CSS變量存在空格尾隨特點，這意味着變量名後可能跟一個空格。
--main-color: #3498db;
body {
background-color: var(--main-color );
}
4.6 共同calc方法利用
CSS變量可能與calc()函數一起利用，停止打算。
--gap: 20;
.foo {
margin-top: calc(var(--gap) / 2);
}
4.7 行內style屬性中利用
CSS變量也可能生手內style屬性中利用。
<div style="--main-color: #3498db;">...</div>
4.8 在JavaScript中操縱
可能利用JavaScript靜態修改CSS變量。
document.documentElement.style.setProperty('--main-color', '#e74c3c');
五、主題變更實例
以下是一個利用CSS變量的主題變更實例：
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
}
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
.button {
background-color: var(--main-color);
color: white;
}
.button:hover {
background-color: darken(var(--main-color), 10%);
}
<div class="button">點擊我</div>
在這個例子中，我們定義了全局變量--main-color跟--secondary-color，並在差其余CSS規矩會合利用它們。我們還演示了怎樣利用JavaScript靜態修改--main-color變量的值。
經由過程利用CSS自定義屬性，我們可能輕鬆地創建可保護、可復用的款式，並實現主題變更等高等功能。