HTML/CSS

2022.09.23

使用 SCSS each 與 CSS var 變數,調整 Bootstrap, Element UI 的 CSS 樣式

以下用 Element UI 當作範例,但也適用於,像是 Bootstrap 這樣的 CSS Library 唷

與自定義主題的差別

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*

SASS, LESS 退散,原生 CSS 可以使用變數啦! – MUKI space*

今天要跟大家分享一個新的 CSS 語法:變數。而且這個變數是原生的 CSS 就有的語法,不是其他預處理器例如 […]

SASS, LESS 退散,原生 CSS 可以使用變數啦!

▼ 宣告顏色變數

: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,還不用複製貼上五次唷!

結語

以上,有任何問題歡迎留言給我。假設有更簡潔、更易維護的寫法也歡迎分享~!

歡迎給我點鼓勵,讓我知道你來過 :)

guest

0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.