1.1 什麼是 CSS 變數？
CSS 變數，也稱為自定義屬性 (custom properties)，就是在 CSS 中宣告的變數，可以用來儲存像顏色、尺寸、字體等 CSS 屬性的值。它們提供了一種有效的方法來改善網頁上樣式的靈活性和可維護性。
什麼是 CSS 變數？
CSS 變數 是可以儲存 CSS 屬性值並在樣式的不同部分重複使用的變數。它們是透過 雙連字符 (--) 定義的，可以在任何選擇器中設置，但通常會在根選擇器 :root 中設置，以便在文件中的任何地方都能使用。
例子：
CSS
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
CSS 變數的主要特點：
- 重複使用: CSS 變數允許你定義一次值然後在 CSS 的不同部分多次使用。這有助於避免重複並簡化樣式管理。
- 靈活性: CSS 變數的值可以根據條件改變，如元素的狀態或媒體查詢。這可以創建更具適應性和動態的樣式。
- 繼承性: CSS 變數從父元素繼承到子元素，這簡化了樣式的管理和組織。
- 可管理性: 使用變數簡化了代碼的維護，因為變數值的更改會自動反映在所有使用這些變數的元素上。
1.2 CSS 變數的使用範例
在 JavaScript 中使用 CSS 變數的範例：
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
範例 1: 定義和使用變數
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
HTML
<body>
<p>這是一個段落。</p>
<a href="#">這是一個連結</a>
</body>
解釋：
- 在這個範例中定義了三個變數：
--main-bg-color,--main-text-color和--primary-color - 這些變數被用來設定背景、文字和連結的顏色
1.3 在 JavaScript 中更改變數的值
在這個範例中，變數被用來設定頁面的主題樣式。按下按鈕時，變數的值會改變，從而改變背景和文字顏色：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
HTML
<button id="toggle-theme">切換主題</button>
<p>這是一個段落。</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION