css原生變數 var

標籤：cal   var   方式   預設值   .com   png   作用   back   文字   

css 變數的支援情況：

在pc端支援還不錯，ie不支援，移動端也不支援，大概這就是css變數沒有廣泛使用的原因吧

CSS先行編譯工具Sass/Less/Stylus的便捷之處就是可以定義變數，方便代碼的維護，其實css也有自己原生的變數var：

命名方式：--* (以--開頭，*代表變數名稱)

變數名稱命名規則：

不能以：$，[，^，(，%等字元字元開頭，可以是數字，但是css和js不能以數字開頭；但是可以是中文，日文或者韓文

使用方法：

1 就想定義元素的屬性一樣：

：root{--red:red;--blue:blue;--yellow:yellow;}.div1{ 
background-color:var(--red);
}

2 css變數有自己的範圍：

例如：

#div2{--borderWidth:2px;}.div3{--borderColor:red;border:1px solid var(--borderColor);}#div2{border:var(--borderWidth) solid red;}

 

.div3中的--borderColor只能class為div3的元素可以使用，它的範圍在div3中

--borderWidth 只能是id為div2的元素才可以使用，別的元素沒有作用

:root下定義的變數的範圍是整個文檔

3 css預設值

var( <自訂屬性名> [, <預設值 ]? )

.div5{background-color:var(--color,red);}

 

--color變數沒有定義，就使用預設值red；

所以上面的定義方式等價於：

 

.div5{ background-color:red;}

 

4 css變數預設值

.div6{background-color:var(--color);}

 

div6沒有定義預設值。--color變數沒有定義。背景顏色預設是白素

等價於沒有定義背景顏色

 

5 不合法的變數值：

.div7{--width:20px;color:var(--width,red);}

不合法的使用，不是預設值。等價於

.div7{--width:20px;color:20px;}

所以文字的顏色是文字的預設顏色，不是紅色而是黑色

 

6 CSS變數的空格尾隨特性

.div8{--size:20px;font-size:var(--size)px;}div8的字型大小並不是20px;是預設的字型大小解析出來是font-size:20 px;在20的後邊有一個空格 。。。。

可以使用CSS3 calc（）計算：

.div8 {  --size: 20;     font-size: calc(var(--size) * 1px);}div8的字型大小才是20px;

 

 

7 css屬性不能定義變數。例如：

.div4{--width:width;border-var(--width):1px;var(--width):20px;}

上面的定義方式是不合法的

 

8 與Sass/Less/Stylus中的定義不同，不能像定義變數一樣；例如：

--red:red;span{
 background-color:var(--red);
}

上面的定義方法是不起作用的

css原生的變數的定義方法，就想定義元素的屬性一樣

 

css原生變數 var