CSS Variables

dabblet.css

/*
	CSS Variables
*/ 

:root {
	-webkit-var-bgcolor: green;
	-moz-var-bgcolor: green;
	-ms-var-bgcolor: green;
	-o-var-bgcolor: green;
	var-bgcolor: green;
}

.test {
	width: 200px;
	background: red;
	margin: 10px;
	padding: 10px;
}

.test1 {
	background: -webkit-var(bgcolor);
	background: -moz-var(bgcolor);
	background: -ms-var(bgcolor);
	background: -o-var(bgcolor);
	background: var(bgcolor);
}

.test2 {
	-webkit-var-bgcolor: #c0ffee;
	background: -webkit-var(bgcolor);
	background: -moz-var(bgcolor);
	background: -ms-var(bgcolor);
	background: -o-var(bgcolor);
	background: var(bgcolor);
}

dabblet.html

<h1>CSS variables (working in Chrome behind option in chrome://flags)</h1>
<p>This uses the var syntax, rather than the old data one.</p>

<div class="test">Should be red (as per usual)</div>
<div class="test test1">Should be green</div>
<div class="test test2">Should be overwritten</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}