這禮拜忙了些,只好先偷懶打張安牌。這邊就記一下前陣子同學弄主題切換時用到的 CSS 變數(Variables)功能用法

原本使用 CSS 時就會有許多重複使用的部分,例如說網站的主色彩和副色彩等,然而在管理上,或是要修改的時候就會很麻煩,通常都要另外借助工具來處理。然而 CSS 其實原生就有變數可以使用,大大地增加了改動時的方便性。用法上也相當簡單。

在 CSS 宣告變數時,建議放在 :root 裡,並使用 --變數名 的方式宣告。例如

:root{
    --color: #000000;
}

而使用的時候只要 var(--變數名) 就可以囉。例如

body {
  background: var(--color);
}
……

閱讀全文