CSS 變數 – 簡化您的樣式表

第 17 講：CSS 變數 – 簡化樣式表

在本次講座中，我們將了解 CSS 變數（也稱為自訂屬性）以及它們如何透過允許您在樣式表中重用值來幫助簡化程式碼。

1.什麼是 CSS 變數？

CSS 變數可讓您將顏色、字體大小或間距等值儲存在中心位置，並在整個樣式表中重複使用它們。這使您的程式碼更易於維護，因為您可以輕鬆地在一處更新值，而無需搜尋整個樣式表。

CSS 變數使用 -- 前綴定義，您可以使用 var() 函數存取它們。

2.定義 CSS 變數

CSS 變數通常在 :root 選擇器中定義，它代表文件的頂層。

範例：

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
}

在此範例中：

• 我們定義 --primary-color、--secondary-color 和 --font-size 作為我們的自訂變數。
• 然後透過 var() 函數在 body 和 h1 樣式中使用這些變數。

3.使用 CSS 變數的好處

• 可重複使用性：您可以在整個樣式表中重複使用相同的值，從而減少程式碼重複。
• 可維護性：如果需要更改顏色或字體大小，只需在一個地方更新變數的值即可。
• 動態更新：CSS 變數可以使用 JavaScript 動態更新，在建立互動式設計時更加靈活。

4.覆蓋 CSS 變數

您可以覆寫特定選擇器中的 CSS 變數以提供特定於上下文的值。

範例：

:root {
    --primary-color: #3498db;
}

.dark-mode {
    --primary-color: #34495e;
}

body {
    color: var(--primary-color);
}

在此範例中，當套用 .dark-mode 類別時，--primary-color 將會被覆寫。這使您可以輕鬆地在不同的配色方案（例如淺色模式和深色模式）之間切換。

5.在媒體查詢中使用變數

CSS 變數與媒體查詢配合得很好，讓您可以根據螢幕尺寸調整值。

範例：

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

在此範例中，--font-size 變數在較小的螢幕上減小，使文字在行動裝置上更具可讀性。

6. CSS 變數中的後備值

您可以為 CSS 變數提供後備值，以防瀏覽器未定義或支援該變數。

範例：

body {
    font-size: var(--font-size, 18px);
}

這裡，如果沒有定義--font-size，瀏覽器將預設為18px。

7.變數與 JavaScript

CSS 變數最強大的方面之一是它們可以使用 JavaScript 進行操作，讓您可以建立動態的互動式樣式。

範例：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

在此範例中，使用 JavaScript 將 --primary-color 變數更新為新顏色 (#e74c3c)，這會動態變更頁面的樣式。

8.實際用例

• 主題：使用 CSS 變數為您的網站建立淺色和深色主題。
• 設計系統：透過使用顏色、間距和排版變數來建立一致的設計系統。
• 動態互動：建立互動式元素，使用 CSS 變數和 JavaScript 即時更新其樣式。

結論

CSS 變數提供了一種靈活的方式來管理樣式、提高程式碼可維護性並啟用動態更新。透過將 CSS 變數合併到您的工作流程中，您可以簡化您的開發流程並建立更易於維護、可擴展的樣式表。

---

在 LinkedIn 上關注我

裡多伊‧哈桑

以上是CSS 變數 – 簡化您的樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！