本机CSS变量

一个功能名称你想看看在 CSS。那些希望变量的举起手来…(我肯定你们中有些人急需父类选择器但你在少数!)

 

这个问题源自我们需要使用和多次重用相同的颜色和其他值在一个样式表。例如:

section { border-color: #334; }
h1      { color: #334; }
p       { background-color: #334; }

维护变得比它需要。我们需要记住一个范围的六角/ RGB值和,不可避免的,挑剔的客户端或设计师将决定# 335是“有价值”。搜索和替换可能会奏效,但如果你已经使用# 333344在一些地方或rgb(21、21、2 c)在其他人。

 

CSS变量解决这个问题。您定义# 334作为一个单独的命名变量和使用它在你的代码。这通常是第一个特性实现CSS预编译器。例如,在更少的:

 

@mycolor: #334;

section { border-color: @mycolor; }
h1      { color: @mycolor; }
p       { background-color: @mycolor; }

或Sass

 

 

$mycolor: #334;
section { border-color: $mycolor; }
h1      { color: $mycolor; }
p       { background-color: $mycolor; }

幸运的是,本地的CSS变量将很快到来。有一个W3C规范草案在http://www.w3.org/TR/css-variables/,它揭示了我们可以编写CSS代码当供应商开始实现支持。

 

:root

{
  var-mycolor: #334;
}
section { border-color: var(mycolor); }
h1      { color: var(mycolor); }
p       { background-color: var(mycolor); }

也许这不是来得简洁/ Sass少,但这是一个很大的进步,将缓解我们都遇到了的维护问题。

 

这是一个令人兴奋的发展但不要松懈。没有保证它将采取所有的供应商和,即使他们做的,这个功能似乎没有对旧浏览器的向后兼容。