CSS variable 變量

聲明變量的時候，變量名前面要加兩根連詞線 --，聲明的命名不能包含$、[、^、(、%等字元，普通字元局限于[0~9]、[a~z]、[A~Z]、下劃線_和短橫線-這些組合，但是可以是中文，日文或者韓文。例如：

變量的值可以為各式各樣的值，包括字元串。如：

變量的使用要用到var()函數來讀取。

例如：

線上效果：codepen.io/jianxiujiuc…

如果變量值是數值，不能與數值機關直接連用，隻能配合 calc() 函數使用。例如：

聲明過的變量也可以被新變量引用，例如：

CSS變量的作用域與 CSS 的"層疊"（cascade）規則一緻，全局聲明，也可以局部聲明。聲明的變量可以被重新定義，按優先級來顯示。這一點是預處理器的變量所達不到的。例如：

效果如下：codepen.io/jianxiujiuc…

var()函數還可以使用第二個參數，表示變量的預設值。如果該變量不存在，就會使用這個預設值。例如：

當原生變量的值定義為rgb()函數的值，在頁面中調用它，那麼Sass編譯會報錯。例如：

以上代碼在原生的CSS裡是沒問題的，能正确讀取到顔色值。但是如果是在SCSS裡，編譯則會報錯：wrong number of arguments (1 for 3) for 'rgb'因為SCSS自己封裝了rgb函數，函數接收的值的格式必須是 xxx,xxx,xxx ，SASS會認為這裡傳進來的參數格式不對，是以報錯了。

但是，如果用 rgba() 函數，卻又可以編譯，例如：

注：上述代碼在codepen的sass模式下也無法生效，用vs code的插件live sass可以編譯通過。

sass的變量經過編譯之後用js是沒有辦法修改的，而css原生變量卻可以通過js重新指派，這一點絕對是大大的優勢啊。例如：