前面的話(huà)

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

 

基本用法

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

　　兼容性：移動(dòng)端和IE瀏覽器不兼容

【聲明變量】

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

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

:root{
  --bgColor:#000;
}

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

<body style="--bgColor:#000">

　　變量聲明語(yǔ)句必須包含一個(gè)元素內(nèi)，而不能隨意放置

//錯(cuò)誤
<style>
--bgColor:#000;
</style>

【使用變量】

　　使用var()函數(shù)使用變量，并且可以被使用在任意的地方。例如：var(--example-variable)會(huì)返回--example-variable所對(duì)應(yīng)的值

<body style="--bgColor:#000;">
    <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    </body>

　　var()函數(shù)還有一個(gè)可選參數(shù)，用來(lái)設(shè)置默認(rèn)值，當(dāng)變量無(wú)法取得值時(shí)，則使用默認(rèn)值

<body>
    <div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>    </body>

 

繼承和層疊

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

<body style="--bgColor:green;">
    <div style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></div>    </body>

 

組合和計(jì)算

【組合】

　　CSS 變量可以進(jìn)行組合使用

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xù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 class="box"></div>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

　　但是，CSS變量不能進(jìn)行如下形式的組合，var(--color1)var(--color2)不被瀏覽器識(shí)別，如果分開(kāi)，如var(--color1) var(--color2)，則被解析為# 333，同樣無(wú)法被瀏覽器識(shí)別

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><div class="box"></div>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

【計(jì)算】

　　變量和普通樣式值一樣，除了組合，還可以使用calc進(jìn)行計(jì)算

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><div class="box"></div>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

 

JS

　　CSS 變量可以和 JS 互相交互。要注意的是，只能使用getPropertyValue()和setProperty()方法，而不能使用style屬性

【style屬性】

<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <script>　　var oBox = document.getElementById('box');
　　console.log(oBox.style['--color']);    //undefined</script>

【getPropertyValue()】

<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <script>　　var oBox = document.getElementById('box');
　　console.log(oBox.style.getPropertyValue('--color'));//'lightgreen'</script>

【setProperty()】

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

<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>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

 

不支持

　　有一點(diǎn)要特別注意的是，變量不支持!important

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><div class="box"></div>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

　　chrome瀏覽器截圖如下

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

 

用途

　　1、可維護(hù)性

　　在網(wǎng)頁(yè)中維護(hù)一個(gè)配色方案或尺寸方案，意味著一些樣式在CSS文件中多次出現(xiàn)，并被重復(fù)使用。當(dāng)修改方案時(shí)，不論是調(diào)整某個(gè)樣式或完全修改整個(gè)方案，都會(huì)成為一個(gè)復(fù)雜的問(wèn)題，而單純查找替換是遠(yuǎn)遠(yuǎn)不夠的，這時(shí)CSS變量就派上用場(chǎng)了

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

:root{
  --mainColor:#fc0;
}
.div1{
  color:var(--mainColor);
}
.div2{
  color:var(--mainColor);
}

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

　　2、語(yǔ)義化

　　變量的第二個(gè)優(yōu)勢(shì)就是名稱(chēng)本身就包含了語(yǔ)義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#fc0更容易理解，特別是同樣的顏色出現(xiàn)在不同的文件中的時(shí)候

　　3、更方便的實(shí)現(xiàn)@media媒體查詢(xún)

 　　一般地，媒體查詢(xún)?nèi)缦滤?/p>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

<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 class="box"></div>

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

　　但是，如果使用變量，則可以精簡(jiǎn)代碼

iOS培訓(xùn),Swift培訓(xùn),蘋(píng)果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

<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 class="box"></div>

http://www.cnblogs.com/xiaohuochai/p/7182771.html