MUKI AI Summary
Element UI 雖然能自定義主題，但只能調整整體顏色，難以針對特定 class 修改。使用 SCSS each 與 CSS var 變數，可以精確調整樣式而不影響其他部分。
例如，Element UI 的按鈕有 plain 屬性，透過 SCSS 迴圈與 CSS 變數，可以輕鬆修改按鈕的框線顏色，避免重複編寫 CSS，達到更高效的樣式管理。...
與自定義主題的差別
Element UI 雖然可以自定義主題，但自定義主題調整的是「整體的顏色」。
因此，如果我只想修改特定 class 的顏色 (例：超連結)，但為了這個 class，而去修改自定義主題，有可能會更動到其他的 class，風險較大。
所以我最後選擇的方法，是用 SCSS 提供的函式，搭配 CSS 原生的 var 變數做調整。此做法不只能用在 Element UI 上，假設你也有碰到類似的問題：「在使用元件庫時，想要修改特定的樣式」，也許能參考我的作法唷！
以 Button 元件為例
▼ Element UI 的按鈕，有一個屬性為 plain
<el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>資訊按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button>
▼ 編譯後，按鈕會多一個 is-plain 的 class，設定 plain 屬性的顏色
.el-button--primary.is-plain {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}現在，我只想修改這些按鈕的框線顏色 (border-color)，不想動到其他部分，我就可以利用 SCSS 與 CSS 幫我達成目的。
使用原生 CSS 變數設定顏色
我們可以先用 CSS 的 var，幫我們把想要的框線顏色設定好。
如果這聽過 CSS 變數，或是還不太熟悉的朋友，可以參考我之前寫的「SASS, LESS 退散，原生 CSS 可以使用變數啦！」
SASS, LESS 退散，原生 CSS 可以使用變數啦！ - MUKI space*
今天要跟大家分享一個新的 CSS 語法：變數。而且這個變數是原生的 CSS 就有的語法，不是其他預處理器例如 […]
https://muki.tw/tech/html-css/native-css-variables/
▼ 宣告顏色變數
:root {
--primary-color: #409EFF;
--success-color: #67C23A;
--warning-color: #E6A23C;
--danger-color: #F56C6C;
--info-color: #909399;
}使用 SCSS 跑迴圈，自動產生 CSS
接下來可以用 each 跑迴圈，搭配前面的 CSS 變數，減少重複的複製貼上 XXD
// 建立一個陣列，用逗號分隔
$array: primary, success, warning, danger, info;
// 跟 JavaScript 類似，遍歷 array 後，將 $item 寫到 CSS 裡
@each $item in $array {
.el-button--#{$item} {
&.is-plain {
border-color: var(--#{$item}-color)
}
}
}最後產生的 CSS，就是修改 is-plain 這個 class 裡的 border-color
.el-button--primary.is-plain {
border-color: #409EFF;
}
.el-button--success.is-plain {
border-color: #67C23A;
}
.el-button--warning.is-plain {
border-color: #E6A23C;
}
.el-button--danger.is-plain {
border-color: #F56C6C;
}
.el-button--info.is-plain {
border-color: #909399;
}如此一來，就可以保有 Element UI 原本的顏色規範，同時又能調整特定的 class，還不用複製貼上五次唷！
結語
以上，有任何問題歡迎留言給我。假設有更簡潔、更易維護的寫法也歡迎分享～！
1