iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列 第 26

第 26 集:Bootstrap 客製化 root 變數

此篇會解析 Bootstrap root 是如何自定義生成自己的 CSS 樣式。

原始碼

使用到兩隻檔案:


Root variables

顧名思義,存在於根部的變數,泛指所有地方都可以使這些變數。

載入順序

bootstrap.scss 原始碼檔案中可以看出來,root 對於全部 Layout、components 來說是最優先載入的,因為後面樣式都可以使用 root 變數

特性

  • 提供全站皆可使用的自定義 css 變數。
  • 前方加上 bs- 前綴字加以避免與第三方 CSS 發生衝突。

限制

  • 撰寫變數僅支持 #{} 插補的方式。

三步驟使用 root variable

Step1:設置變數

採用存放 _variables.scss 變數資料。

舉例顏色、字型、body

$variable-prefix:             bs- !default;

$colors: (
  "blue":       #0d6efd,
  "indigo":     #6610f2,
  "purple":     #6f42c1,
  "pink":       #d63384,
  "red":        #dc3545,
) !default;

### Step2:設置最外層

> `:root` 代表根目錄選取器,這是 css 設置全域變數的方式,並使用 `--` 符號作為變數開頭。

```scss
:root {
}

Step3:生成 root 樣式

:root {
  @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  } 
}

透過迴圈方式讀取出 $colors 每一筆的資料,$color 代表每一筆資料的 key,$value 代表每一筆資料的 value。

ex:

$color: "blue";
$value: #0d6efd;

透過差補的方式將變數組合起來。

  • --#{$variable-prefix}--bs-
  • #{color}blue
  • #{$value}#0d6efd

編譯後的 css

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
}

接下來就可以在設置樣式時,使用 root 變數當作屬性參數。

示範設置顏色:#0d6efd

  • --#{前綴字}#{顏色}--#{$variable-prefix}blue
  • 透過 var() 將字串轉為變數。
.fs-1 {
  font-size: 2rem;
  color: var(--#{$variable-prefix}blue);
}

開發者工具查看樣式

  • 區域變數會在上方,全域變數會在下方。
  • 透過開發者工具查看最下方樣式 :root,即可看出這個網站的全域變數有哪些。

基礎 root 範例 CodePen 傳送門


進階 root 變數設置

引號問題

#{} 插補會將字串內的引號移除。

解決方法

  • 透過 inspect() 函式保留引號。
:root {
  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
}

body {
  font-family: var(--#{$variable-prefix}font-sans-serif);
}

編譯後的 css

:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  font-family: var(--bs-font-sans-serif);
}

null 參數

透過來判斷值是否為 null 來決定是否要設置 root 變數。

$body-text-align:           null !default;

:root {  
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
}

body {
  text-align: $body-text-align;
}

優勢

  • css 樣式參數值若是 null,則編譯樣式時會直接忽略,不會編譯此樣式。

這種方法有利於過濾不需要編譯的樣式,這樣靈活性更高。

  • 不用額外把沒用的的樣式刪掉,直接將他的參數設為 null 即可。

進階 root 範例 CodePen 傳送門


上一篇
第 25 集:Bootstrap 客製化 RFS 響應式文字
下一篇
第 27 集:Bootstrap 客製化 reboot 重置
系列文
30 天轉生到 bootstrap 5 的意識界30

尚未有邦友留言

立即登入留言