创buildCSS全局variables：样式表主题pipe理
有没有办法在CSS中设置全局variables，如：
@Color1 = #fff; @Color2 = #b00; h1 { color:@Color1; background:@Color2; } 最后更新： 26/05/2017
CSSvariables（自定义属性）已经到了！
又一年的浏览器。 现在Edge已经join了Mozilla和Google，通过支持这个真正的强大function。
预处理器“不”是必需的！
CSS中有很多重复。 一个颜色可能在几个地方使用。
对于一些CSS声明，可以在级联中声明这个更高的值，并让CSSinheritance自然地解决这个问题。
对于不平凡的项目，这并不总是可能的。 通过在:root伪元素上声明variables，CSS作者可以通过使用variables来暂停一些重复的实例。
怎么运行的
在你的样式表顶部设置你的variables：
CSS
创build一个根类：
:root { }
创build一个variables：
:root { --bgd: #333; }
为您的variables添加名称后跟一个值：
（名称可以是您select的任何string。）
:root { --red: #b00; --blue: #00b; --fullwidth: 100%; }
在你的CSS文档的任何地方设置你的variables：
h1 { color: var(--red); } #MyText { color: var(--blue); width: var(--fullwidth); }
浏览器支持/兼容性
FIREFOX：版本31 + （默认启用）
（像往常一样领先。） 更多信息来自Mozilla
CHROME：版本49 + （默认启用） 。
“这个function可以在Chrome 48版本中启用，通过启用实验性Web平台function进行testing。在Chrome地址栏中inputchrome://flags/以访问此设置。
Safari / IOS Safari：版本9.1 / 9.3 （默认启用） 。
Opera：版本39 + （默认启用） 。
Android：版本52 + （默认启用） 。
IE：永远不会发生。
边缘：版本15 + （默认情况下启用） 。
CSS自定义属性降落在Windows Insider Preview版本14986
W3C SPEC
即将到来的CSSvariables的完整规范
阅读更多
试试看
下面附上小提琴和片段以供testing：
（它只能在支持的浏览器上运行。）
DEMO FIDDLE
:root { --red: #b00; --blue: #4679bd; --grey: #ddd; --W200: 200px; --Lft: left; } .Bx1, .Bx2, .Bx3, .Bx4 { float: var(--Lft); width: var(--W200); height: var(--W200); margin: 10px; padding: 10px; border: 1px solid var(--red); } .Bx1 { color: var(--red); background: var(--grey); } .Bx2 { color: var(--grey); background: black; } .Bx3 { color: var(--grey); background: var(--blue); } .Bx4 { color: var(--grey); background: var(--red); }
<p>If you see four square boxes then variables are working as expected.</p> <div class="Bx1">I should be red text on grey background.</div> <div class="Bx2">I should be grey text on black background.</div> <div class="Bx3">I should be grey text on blue background.</div> <div class="Bx4">I should be grey text on red background.</div>
你现在不能在CSS中创buildvariables。 如果你想要这样的function，你需要使用像SASS或LESS这样的CSS预处理器。 这是你在SASS中的样式：
$Color1:#fff; $Color2:#b00; $Color3:#050; h1 { color:$Color1; background:$Color2; }
他们还允许你做其他（真棒）的东西，如嵌套select器：
#some-id { color:red; &:hover { cursor:pointer; } }
这将编译为：
#some-id { color:red; } #some-id:hover { cursor:pointer; }
查阅SASS官方教程获取设置说明以及更多关于语法/function的信息。 就我个人而言，我使用Mindscape的一个名为Web Workbench的Visual Studio扩展来轻松开发，也有很多其他IDE的插件。
更新
截至2014年7月/ 8月，Firefox已经实现了CSSvariables的草案规范 ，这里是语法：
:root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { color: var(--main-color); }
使用CSS是不可能的，但是使用像CSS或SASS这样的CSS预处理器是不可能的。
我这样做：
html：
<head> <style type="text/css"> <? require_once('xCss.php'); ?> </style> </head>
xCss.php：
<? // place here your vars $fntBtn = 'bold 14px Arial' $colBorder = '#556677' ; $colBG0 = '#dddddd' ; $colBG1 = '#44dddd' ; $colBtn = '#aadddd' ; // here goes your css after the php-close tag: ?> button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
尝试SASS http://sass-lang.com/或LESS http://lesscss.org/
我喜欢SASS，并将其用于我的所有项目。
您将需要相同的LESS或SASS。
但是，这是另一个我认为可以在CSS3中实现的方法。
http://css3.bradshawenterprises.com/blog/css-variables/
例如：
:root { -webkit-var-beautifulColor: rgba(255,40,100, 0.8); -moz-var-beautifulColor: rgba(255,40,100, 0.8); -ms-var-beautifulColor: rgba(255,40,100, 0.8); -o-var-beautifulColor: rgba(255,40,100, 0.8); var-beautifulColor: rgba(255,40,100, 0.8); } .example1 h1 { color: -webkit-var(beautifulColor); color: -moz-var(beautifulColor); color: -ms-var(beautifulColor); color: -o-var(beautifulColor); color: var(beautifulColor); }
