Bootstrap - CSS 變數：初學者指南

你好，未來的網頁開發者們！今天，我們將深入Bootstrap中CSS變數的奇妙世界。如果你是新手，別擔心；我會逐步引導你，就像我們坐在舒適的教室裡一樣。讓我們展開這次令人興奮的旅程！

Bootstrap - CSS Variables

CSS 變數是什麼？

在我們進入Bootstrap特定的變數之前，讓我們先了解CSS變數是什麼。CSS變數，也稱為CSS自定義屬性，允許你存儲特定的值以在整個樣式表中重複使用。把他們想像成裝著你喜歡的顏色、大小或其他CSS值的容器。

根變數

在Bootstrap中，根變數是整個變數系統的基礎。它們定義在:root選擇器中，這代表了你的文件樹的最高層。

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

這些變數定義了在Bootstrap中使用的核心顏色。例如，--bs-blue是Bootstrap的主要藍色。你可以像這樣在自己的CSS中使用這些變數：

.my-element {
color: var(--bs-blue);
}

預設變數

Bootstrap還提供了一組預設變數，用於樣式化各種組件。這些變數通常參考我們剛才看到的根變數。

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

在這裡，--bs-primary被設置為使用--bs-blue的值。這樣可以方便地進行主題設計，並在項目中保持一致性。

暗色模式變數

Bootstrap 5引入了使用CSS變數的內置暗色模式支持。這些變數在啟用暗色模式時更改它們的值。

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

當應用data-bs-theme="dark"屬性到元素上時（通常是<html>或<body>），這些變數將覆蓋它們的亮色模式對應值，立即將你的網站轉換為暗色模式。酷炫吧？

組件變數

Bootstrap組件也使用CSS變數進行樣式化。這使得無需影響其他組件即可輕鬆自定義個別組件。

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

這些變數控制主要按鈕外觀的各个方面。想要改變懸停顏色？只需修改--bs-btn-hover-bg！

前綴

Bootstrap為其所有變數使用bs-前綴，以避免與你的自定義變數或其他庫的變數發生衝突。如果你正在創建自己的變數，使用自己的前綴是一個好習慣。

:root {
--my-awesome-color: #ff69b4;
}

示例

讓我們通過幾個示例來將我們的知識付諸實踐：

改變主要顏色：

:root {
--bs-primary: #ff69b4; /* 热粉紅是新藍色！ */
}

創建自定義按鈕：

.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* 懸停時更深一些的粉紅色 */
--bs-btn-hover-border-color: #ff1493;
}

在暗色模式中調整背景：

[data-bs-theme="dark"] {
--bs-body-bg: #000; /* 漆黑背景 */
}

焦點變數

Bootstrap還提供了用於焦點狀態的變數，確保網站的可訪問性：

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

這些變數控制交互元素的焦點環外觀。

網格斷點

最後但同樣重要的是，Bootstrap的響應式網格系統也由CSS變數控制：

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

這些變數定義了佈局在不同屏幕尺寸下變化的寬度。

總結

這裡是一個我們已經涵蓋的主要CSS變數類型的快速參考表：

變數類型	目的	示例
根變數	定義核心值	`--bs-blue: #0d6efd;`
預設變數	設置主題顏色	`--bs-primary: var(--bs-blue);`
暗色模式變數	控制暗色主題	`--bs-body-bg: #212529;`
組件變數	樣式化特定組件	`--bs-btn-bg: var(--bs-primary);`
焦點變數	控制焦點狀態	`--bs-focus-ring-width: 0.25rem;`
網格斷點	定義響應式斷點	`--bs-breakpoint-md: 768px;`

以上就是Bootstrap CSS變數的世界！記住，掌握這些知識的關鍵在於實踐。嘗試在項目中調整這些變數，看看它們如何影響你的設計。快樂編程，並記得樂在其中！

Credits: Image by storyset