一直以來，CSS中是沒有變量而言的，要使用 CSS 變量，只能借助 SASS 或者 LESS 這類預(yù)編譯器。新的草案發(fā)布之后，直接在 CSS 中定義和使用變量不再是幻想了。本文將詳細(xì)介紹CSS變量variable

CSS 變量，顧名思義，也就是由網(wǎng)頁的作者或用戶定義的實體，用來指定文檔中的特定變量。

更準(zhǔn)確的說法，應(yīng)該稱之為 CSS 自定義屬性 ，不過下文為了好理解都稱之為 CSS 變量。

一直以來我們都知道，CSS 中是沒有變量而言的，要使用 CSS 變量，只能借助 SASS 或者 LESS 這類預(yù)編譯器。

但是新的草案發(fā)布之后，直接在 CSS 中定義和使用變量已經(jīng)不再是幻想了，像下面這樣，看個簡單的例子：

// 聲明一個變量：

:root{

--bgColor:#000;

}

這里我們借助了上篇文章 結(jié)構(gòu)性偽類 中的 :root{ } 偽類，在全局 :root{ } 偽類中定義了一個 CSS 變量，取名為 --bgColor 。

定義完了之后則是使用，假設(shè)我要設(shè)置一個 div 的背景色為黑色：

.main{

background:var(--bgColor);

}

這里，我們在需要使用之前定義變量的地方，通過 var(定義的變量名) 來調(diào)用。

CSS 變量是由CSS作者定義的實體，其中包含要在整個文檔中重復(fù)使用的特定值。使用自定義屬性來設(shè)置變量名，并使用特定的 var() 來訪問

兼容性：移動端和IE瀏覽器不兼容

【聲明變量】

變量必須以--開頭。例如--example-variable: 20px，意思是將20px賦值給--example-varibale變量

可以將聲明變量的語句置于任何元素內(nèi)，如果要設(shè)置html' target='_blank'>全局變量，則可以設(shè)置為:root、body或html

:root{ --bgColor:#000;}

變量聲明就像變普通的樣式聲明語句一樣，也可以使用內(nèi)聯(lián)樣式

 body >
 變量聲明語句必須包含一個元素內(nèi)，而不能隨意放置
//錯誤 style --bgColor:#000; /style 
【使用變量】
 使用var()函數(shù)使用變量，并且可以被使用在任意的地方。例如：var(--example-variable)會返回--example-variable所對應(yīng)的值
 body >

 var()函數(shù)還有一個可選參數(shù)，用來設(shè)置默認(rèn)值，當(dāng)變量無法取得值時，則使用默認(rèn)值
 body div >

 
繼承和層疊
 和普通的樣式屬性一樣，變量屬性也支持繼承和層疊。下面示例中，body元素的變量值為green，div元素的變量值為red; 基于層疊的原理，最終div元素的背景顏色為紅色
 body >

 
組合和計算
【組合】
 CSS 變量可以進(jìn)行組合使用
 style .box{--top:20%;--left:30%;width: 100px;height: 100px;background-image: url(img/24/xiaoshu.jpg);background-position: var(--left) var(--top);} /style div >

 但是，CSS變量不能進(jìn)行如下形式的組合，var(--color1)var(--color2)不被瀏覽器識別，如果分開，如var(--color1) var(--color2)，則被解析為# 333，同樣無法被瀏覽器識別
 style .box{--color1:#;--color2:333;width: 100px;height: 100px;background-color: var(--color1)var(--color2);} /style div >
【計算】
 變量和普通樣式值一樣，除了組合，還可以使用calc進(jìn)行計算
 style .box{--borderWidth:2px;width: 100px;height: 100px;background-color:lightblue;border-left: calc(var(--borderWidth) * 2) solid black;} /style div >

 
JS
 CSS 變量可以和 JS 互相交互。要注意的是，只能使用getPropertyValue()和setProperty()方法，而不能使用style屬性
【style屬性】
 div id= box >
【getPropertyValue()】
 div id= box >
【setProperty()】
 style #box{  --color:lightgreen;background-color: var(--color);width: 100px;height: 100px;display:inline-block;} /style button id= btn type= button 變淺藍(lán) /button div id= box /div script var oBox = document.getElementById( box var oBtn = document.getElementById( btn oBtn.onclick = function(){ oBox.style.setProperty( --color , lightblue } /script 

 
不支持
 有一點(diǎn)要特別注意的是，變量不支持!important
.box{ --color:red; width: 100px; height: 100px; background-color:--color !important;} /style div >
 chrome瀏覽器截圖如下
 
用途
 1、可維護(hù)性
 在網(wǎng)頁中維護(hù)一個配色方案或尺寸方案，意味著一些樣式在CSS文件中多次出現(xiàn)，并被重復(fù)使用。當(dāng)修改方案時，不論是調(diào)整某個樣式或完全修改整個方案，都會成為一個復(fù)雜的問題，而單純查找替換是遠(yuǎn)遠(yuǎn)不夠的，這時CSS變量就派上用場了
:root{ --mainColor:#fc0;.div1{ color:var(--mainColor);.div2{ color:var(--mainColor);}
 2、語義化
 變量的第二個優(yōu)勢就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#fc0更容易理解，特別是同樣的顏色出現(xiàn)在不同的文件中的時候
 3、更方便的實現(xiàn)@media媒體查詢
 一般地，媒體查詢?nèi)缦滤?/p>
 style .box{  width: 100px;height: 100px;padding: 20px;margin: 10px;background-color: red}@media screen and (max-width:600px) {.box{ width: 50px;height: 50px;padding: 10px;margin: 5px; }} /style div >
 但是，如果使用變量，則可以精簡代碼
 style .box{  --base-size:10px;width: calc(var(--base-size) * 10);height: calc(var(--base-size) * 10);padding: calc(var(--base-size) * 2);margin: calc(var(--base-size) * 1);background-color: red;}@media screen and (max-width:600px) {.box{ --base-size:5px; }} /style div >
以上就是全新知識：CSS變量-variable的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。