3.1 自定義屬性
CSS 變數，又稱自定義屬性，是管理樣式的強大工具。使用它們可以提高性能和代碼組織，增強 CSS 的支持和靈活性。 讓我們更詳細地看看自定義屬性和繼承如何影響這些方面。
什麼是自定義屬性？
提醒一下，自定義屬性（又稱 CSS 變數）是可以在 CSS 中設置的數值，然後可以在整個樣式文件中多次使用。 它們是用雙破折號 (--) 聲明的，並且可以用 var() 函數來使用。
宣告自定義屬性：
CSS
:root {
--main-color: #3498db;
--padding: 10px;
}
使用自定義屬性：
CSS
background-color: var(--main-color);
padding: var(--padding);
3.2 對性能的影響
1. 優化重複使用
使用 CSS 變數有助於避免代碼重複，因為可以多次使用相同的值，從而減少代碼量並簡化其維護。
例子：
CSS
:root {
--main-color: #3498db;
}
.header {
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
2. 緩存和渲染
瀏覽器可以有效地緩存和處理 CSS 變數，這對性能有積極影響。 當變數的值更改時，瀏覽器只需重新計算樣式一次，從而減少渲染負擔。
3. 動態更新
可以使用 JavaScript 動態更改 CSS 變數，這允許更新樣式而不必重新計算整個頁面。
例子：
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
3.3 對代碼組織的影響
集中管理樣式
通過在一個地方定義 CSS 變數，可以集中管理樣式，這使得它們的維護和更改更加簡單。
例子
在 :root 中更改變數的值會自動更新整個文檔中的所有相關樣式：
CSS
:root {
--font-size: 16px;
--line-height: 1.5;
}
body {
font-size: var(--font-size);
line-height: var(--line-height);
}
繼承和上下文
CSS 變數從父元素繼承到子元素。這使得可以在更高層次設置值，並在更具體的上下文中使用它們。
例子：
CSS
:root {
--base-font-size: 16px;
}
.container {
font-size: var(--base-font-size);
}
.container .heading {
font-size: calc(var(--base-font-size) * 1.5);
}
提高可讀性
使用 CSS 變數提高代碼的可讀性，因為變數可以根據其功能命名，使代碼更易於理解。
例子：
CSS
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.primary-button {
background-color: var(--primary-color);
}
.secondary-button {
background-color: var(--secondary-color);
}
本地和全局變數
變數可以在全局層次（例如 :root）上聲明，也可以在具體的選擇器中本地聲明。這允許創建靈活且適應性的樣式。
例子：
CSS
:root {
--global-padding: 10px;
}
.section {
--section-padding: 20px;
padding: var(--section-padding);
}
.item {
padding: var(--global-padding);
}
3.4 完整實現的範例
這是一個使用變數進行繼承和本地重定義的示例：
CSS
:root {
--main-padding: 10px;
--main-margin: 20px;
--primary-color: #3498db;
}
.container {
padding: var(--main-padding);
margin: var(--main-margin);
}
.container .header {
--primary-color: #e74c3c; /* 本地重定義變數 */
color: var(--primary-color);
}
.container .content {
color: var(--primary-color); /* 使用來自行的變數值 */
}
HTML
<div class="container">
<div class="header">這是標題</div>
<div class="content">這是內容</div>
</div>
解釋：
- 在這個例子中，
--primary-color用於樣式化.content元素的文本，繼承自根的值 - 在
.header元素中，--primary-color被重定義並使用新值
GO TO FULL VERSION