CSS: 變數 (Variables)
這禮拜忙了些,只好先偷懶打張安牌。這邊就記一下前陣子同學弄主題切換時用到的 CSS 變數(Variables)功能用法
原本使用 CSS 時就會有許多重複使用的部分,例如說網站的主色彩和副色彩等,然而在管理上,或是要修改的時候就會很麻煩,通常都要另外借助工具來處理。然而 CSS 其實原生就有變數可以使用,大大地增加了改動時的方便性。用法上也相當簡單。
在 CSS 宣告變數時,建議放在 :root
裡,並使用 --變數名
的方式宣告。例如
:root{
--color: #000000;
}
而使用的時候只要 var(--變數名)
就可以囉。例如
body {
background: var(--color);
}