css定義變量_css原生變量的使用和兼容 附帶還有更高性能，文件更高壓縮率的好處

在開發中，css樣式有一些屬性往往需要重復使用，為了避免代碼冗余，降低維護成本。我們需要使用CSS預編譯工具【Sass/Less/Stylus】，隨着這些工具的流行，CSS變量也開始規范制定，目前很多瀏覽器都已經支持了，css變量的兼容性：

 

變量的定義：

CSS中原生的變量定義語法是：--*，變量使用語法是：var(--*)，其中*表示我們的變量名稱。

關於命名這個東西，各種語言都有些顯示，例如CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有。 但不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下划線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文。

無論是變量的定義和使用只能在聲明塊{}里面。

51220網站目錄 https://www.51220.cn

變量的使用：

1、使用:root 作用域來定義全局變量：（在媒體查詢下也可以使用該作用域）

:root { --text-color: red; } p { color: var( --text-color ); /*使用*/ } a:hover{ color:var( --text-color ); /*在偽類中使用*/ }

2、如果只需要在特定的元素下使用變量，采用局部定義：

#myid{ --text-color: red;//*只能在id為myid的元素下使用,其他地方使用會失效*/ }

3、可以結合CSS3 calc()一起計算：

p{
  --size: 20; font-size: calc(var(--size) * 1px);//20px }

4、css變量可以組合使用，在CSS變量定義的時候可以直接引入其他變量給自己使用，例如：

p {
  --color: red;   
  --text-color: var(--color);//值為red }

 

css變量的注意點：

1、當存在多個同樣名稱的變量時候，變量的覆蓋規則由CSS選擇器的權重決定的，但並無!important這種用法。

2、CSS屬性名是不可以使用變量的。例如下面寫法是錯誤的：

body {
    --bc: background-color;    
    var(--bc): #369; }

3、如果我們使用的變量沒有定義（注意，僅限於沒有定義），則使用后面的值作為元素的屬性值，例如：

.box {
  --1: #369; } body { background-color: var(--1, #cd0000);/*則此時的背景色是#cd0000*/ }

4、css變量是存在缺省值，只要定義正確，里面的值不對，結果以缺省值顯示：如:

body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000);/*背景色為：transparent*/ }

5、css變量默認尾部是有空格的。例如：

p{
  --size: 20; font-size: var(--size)px;//等同於font-size:20 px;這里將使用元素默認的大小。這里可以結合上面例子calc()使用。 }