css原生變量 var

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原生的變量的定義方法，就想定義元素的屬性同樣