根據(jù)Mozilla軟件工程師Cameron McCormack的透露，火狐瀏覽器從V29版開始支持一種新的CSS特征——CSS變量。下面這個(gè)視頻可以讓你大概的了解一下CSS變量的基本情況：

CSS變量定義通過在變量名前加var-前綴實(shí)現(xiàn)，引用時(shí)使用var()獲取變量值。例如：

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

WebTian.com

關(guān)注HTML5, CSS3, WEB前端技術(shù)

這里定義了兩個(gè)CSS變量，分別是companyblue和lighterblue，變量的應(yīng)用范圍是document的根節(jié)點(diǎn)，使用效果如下：

CSS變量是有應(yīng)用范圍的，這就是說，你可以覆蓋它們：

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

.partnerbadge {

var-companyblue: #036;

var-lighterblue: #cfc;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

WebTian.com

關(guān)注HTML5, CSS3, WEB前端技術(shù)

WebTian.com

關(guān)注HTML5, CSS3, WEB前端技術(shù)

這樣定義后，在.partnerbadge類下的h1和h2就變成了另外一種藍(lán)色：

CSS變量可以賦予任何值，可以像使用任何其它值一樣使用它們，例如，你可以把它們放到calc()計(jì)算表達(dá)式里。CSS變量值可以重新賦值，比如，在不同的media query里賦不同的值。下面是一些使用場(chǎng)景的例子。

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

var-largemargin: 20px;

var-smallmargin: calc(var(largemargin) / 2);

var-borderstyle: 5px solid #000;

var-headersize: 24px;

}

.partnerbadge {

var-companyblue: #036;

var-lighterblue: #369;

var-headersize: calc(var(headersize)/2);

transition: 0.5s;

}

@media (max-width: 400px) {

.partnerbadge {

var-borderstyle: none;

background: #eee;

}

}

/* Applying the variables */

body {font-family: 'open sans', sans-serif;}

h1 {

color: var(companyblue);

margin: var(largemargin) 0;

font-size: var(headersize);

}

h2 {

color: var(lighterblue);

margin: var(smallmargin) 0;

font-size: calc(var(headersize) - 5px);

}

.partnerbadge {

padding: var(smallmargin) 10px;

border: var(borderstyle);

}

根據(jù)上面的CSS定義，當(dāng)瀏覽器窗口小于400px時(shí)，mediaQuery就會(huì)發(fā)生作用，里面的CSS變量值發(fā)生變化。

CSS變量這個(gè)新的CSS功能是在火狐Aurora版里第一次出現(xiàn)，也只是實(shí)現(xiàn)了基本功能。在這項(xiàng)功能真正的出現(xiàn)在正式發(fā)布版前，還有不少的CSS3規(guī)范里規(guī)定的內(nèi)容要實(shí)現(xiàn)。Cameron對(duì)這些有一個(gè)比較詳細(xì)的說明：

按照CSS3規(guī)范，火狐里還沒有實(shí)現(xiàn)的部分是CSSVariableMap，它是一個(gè)對(duì)象，功能很像JavaScript里的Map，有g(shù)et，set等其它方法，使用這些方法能從CSS樣式聲明中獲取變量的值。需要注意的是，你仍有可以使用getPropertyValue和setProperty等方法從DOM值獲取這些變量，但需要使用完整名稱，例如var-theme-colour-1。

試一試CSS變量吧，使用最新的火狐Nightly版就可以體驗(yàn)上面的這些代碼演示的新功能。

總結(jié)

以上是生活随笔為你收集整理的css值变量吗,CSS变量初体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。