Firefox Nightly 支持原生CSS变量

CSS孱弱的代码表达力一直让人诟病,特别是大型项目,一个小调整可能需要修改多处,一点也不符合DRY的原则。也因此出现了SASS、LESS、Stylus等各种编译到CSS的语言。不过,原生CSS也开始迎头赶上。Firefox最近发布的Nightly版(version 29)已经支持CSS 变量啦!

变量定义使用var-前缀,例如,以下代码定义了两个变量companybluelighterblue

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

变量的应用则为var()

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

《Firefox Nightly 支持原生CSS变量》

变量是有作用域的,也就是说,变量是可以覆盖的:

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

在以上代码中,classpartnerbadge的元素中包含的标题会使用不同的蓝色。

《Firefox Nightly 支持原生CSS变量》

变量可以是任意的值,你也可以将变量作为任意值使用。你还可以重定义变量。以下是一些例子:

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

《Firefox Nightly 支持原生CSS变量》

仅仅为了定义变量而使用SASS、LESS、Stylus等编译到CSS的语言的开发者,以后可以直接使用原生CSS了。

原文 CSS Variables in Firefox Nightly
翻译 SegmentFault

    原文作者:weakish
    原文地址: https://segmentfault.com/a/1190000000375651
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞