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

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

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

WebTian.com

關注HTML5, CSS3, WEB前端技術

這里定義了兩個CSS變量，分別是companyblue和lighterblue，變量的應用范圍是document的根節點，使用效果如下：

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

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

.partnerbadge {

var-companyblue: #036;

var-lighterblue: #cfc;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

WebTian.com

關注HTML5, CSS3, WEB前端技術

WebTian.com

關注HTML5, CSS3, WEB前端技術

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

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

: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);

}

根據上面的CSS定義，當瀏覽器窗口小于400px時，mediaQuery就會發生作用，里面的CSS變量值發生變化。

CSS變量這個新的CSS功能是在火狐Aurora版里第一次出現，也只是實現了基本功能。在這項功能真正的出現在正式發布版前，還有不少的CSS3規范里規定的內容要實現。Cameron對這些有一個比較詳細的說明：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。