CSS變數 CSS variable

 工作時的小筆記。

宣告

--variable-name:value;

1. 可在inline 中宣告變數
   <div style="--variable-name:value;">
2. 變數有效範圍：此dom本身及旗下子代所有dom
3. 可與 media require 一同使用，依螢幕寬度改變其值。此優勢利於RWD排版，請見文末 bs5應用 一節。
   

MDN說明文件

引用

var(--variable-name, default value);
MDN說明文件

css 變數亦可引用在calc內。

--my-var:3/4;
width:calc(100vh - var(--my-var));

也可引用在inline。

<div style="--variable-name:value;property-name:var(--variable-name);">

但缺點是：若value設定時格式錯誤（例如上例，設為長度屬性的值卻沒有長度單位），borowser develop tool 介面上不會畫槓提醒你這是無效數值。
優點則是：在開發時，用develop tool直接修改數值就可以看到其他此變數之元件的連動變化，便於開發時排版使用。若排版機制全程使用scss變數，則需每次微調數值時，都需等待編譯後瀏覽器更新才能看到結果。但引入 css variable 也要增加不少冗綴字符（缺點二），適合模組化時使用（只要寫一次）。

SCSS

scss的變數可引用在宣告css變數之時。

$prefix:my-;
--#{$prefix}variable-name:value;

在 bootstrap 5 中的應用

bs5 新加入的 .g-bk-spacer 便大量使用 css variables 更動 .row 自身的 negative margin ，及旗下的 .col-* 的 padding。

bs5 grid system 導入css variables 的另一利多：客製響應式間距變得簡單便利，請見bootstrap5 grid system layout解構與速成客製化響應式間距 Grid。

bs5 grid system 設計細節請詳參 bootstrap source mixins/_grid.scss。