MUKI space*
Front-end Development,
Effective Note-Taking.
在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module
在 Vue3 + Vite 專案中，安裝 SASS 只需執行命令 npm add -D sass，然後在 Vue 檔案中使用 sass/scss 語法即可。SASS 加上 CSS Module 可以讓不同元件使用各自的 CSS 設定，避免重複撰寫樣式。
設定 CSS Module 需在 vite.config.ts 中設置 modules 選項。Vite 支援 SCSS + CSS Module，新增 .module.scss 檔案後，在 Vue 檔案中匯入並使用。這樣可以在 SCSS 中方便地使用 CSS Module，實現樣式獨立與重用。...
使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式
Element UI 雖然能自定義主題，但只能調整整體顏色，難以針對特定 class 修改。使用 SCSS each 與 CSS var 變數，可以精確調整樣式而不影響其他部分。
例如，Element UI 的按鈕有 plain 屬性，透過 SCSS 迴圈與 CSS 變數，可以輕鬆修改按鈕的框線顏色，避免重複編寫 CSS，達到更高效的樣式管理。...
SASS, LESS 退散，原生 CSS 可以使用變數啦！
CSS 現在支援原生變數，無需使用 SASS 或 LESS 等預處理器。變數的使用需要考慮瀏覽器的相容性，目前 Chrome 和 Firefox 已經支援。CSS 變數的基本語法與預處理器類似，需在 :root 或其他選擇器中定義，並使用 var() 呼叫。
變數可以在不同選擇器中繼承，並可在 RWD 設計中動態改變。CSS 變數亦可互相賦值，並可與 JavaScript 結合使用。使用 var() 時需注意規範，例如不能直接合併單位，需用 calc() 計算。CSS 變數的靈活性和可擴展性值得開發者關注和探索。...
使用 sass 有效控管 z-index 圖層順序
使用 z-index 管理圖層順序時，常用的數字如 99, 100, 9999 等，容易造成混亂。SASS 提供有效管理 z-index 的方法，利用變數和 index function，根據圖層順序自動計算 z-index，減少手動調整的麻煩。
設置變數如 $elements: header-bar, navi, modals，並使用 index 函數來設定 z-index。這種方法適用於複雜專案，可將 z-index 獨立管理，提升維護效率。此方法靈感來自 Sassy Z-Index Management For Complex Layouts，Hugo Giraudel 也提供了另一種解法。...