Firefox Nightly 支持原生CSS變量

CSS孱弱的代碼表達力一直讓人詬病，特別是大型項目，一個小調整可能須要修改多處，一點也不符合DRY的原則。也所以出現了SASS、LESS、Stylus等各類編譯到CSS的語言。不過，原生CSS也開始迎頭遇上。Firefox最近發佈的Nightly版(version 29)已經支持CSS 變量啦！

變量定義使用var-前綴，例如，如下代碼定義了兩個變量companyblue和lighterblue：

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
}

變量的應用則爲var()：

h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}

變量是有做用域的，也就是說，變量是能夠覆蓋的：

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #cfc;
}

h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}

<h1>Header on page</h1>
<h2>Subheader on page</h2>

<div class="partnerbadge">
  <h1>Header on page</h1>
  <h2>Subheader on page</h2>
</div>

在以上代碼中，class爲partnerbadge的元素中包含的標題會使用不一樣的藍色。

變量能夠是任意的值，你也能夠將變量做爲任意值使用。你還能夠重定義變量。如下是一些例子：

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

僅僅爲了定義變量而使用SASS、LESS、Stylus等編譯到CSS的語言的開發者，之後能夠直接使用原生CSS了。

---

原文 CSS Variables in Firefox Nightly
翻譯 SegmentFault