Firefox 將在 29 版支援 CSS 變數 (現在是 26 版):「CSS Variables in Firefox Nightly」。標準是出自 W3C 的「CSS Custom Properties for Cascading Variables Module Level 1」(在寫這篇文章時還是 draft)。
程式碼會長這樣:(直接引用比較複雜的程式碼)
: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/SCSS 做的事情就可以把計算這部份推到 browser 上處理...