Electron0.37でCSS Variables(CSSの変数)が利用可能になりました

Electron0.37.0から搭載Chromeが49になりました。
それに伴い49から実装されたCSS VariablesがElectronで利用可能になりました。
利用方法などは
CSS Variables （CSS カスタムプロパティ） の使い方 | WWW WATCH
など、日本語の記事がありますのでご活用ください。

丁度0.36系で触っていてmargin周りのcalc()でマジックナンバーだらけになってしまい、
「これは後々見返すとやばいっ…変数ほしい！」
となっていたので、Chrome49のリリースとElectronの対応を心待ちにしておりました。
Sass？なにそれｺﾜｲ！という自分のような方々も安心してデフォルトCSSで変数ライフをご堪能ください。
別ブラウザの対応を気にせず使えるのもやっぱりいいよね…

基本は

:root {
    --hoge: 1px;
}

body { 
    margin: var(--hoge);
}

と--付きで宣言してvar(--～)で利用します。

calc()にも使用できますが、符号の反転は
-var(--hoge)
ではまあ当然できなかったので、
var(--hoge) * -1
などで代用しました。

参照

• Release electron v0.37.0 · atom/electron
• CSS Variables （CSS カスタムプロパティ） の使い方 | WWW WATCH
• Chrome Releases: Stable Channel Update Chrome 49
• Chromium Blog: Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features
  Stable updates には見落としか見つけられませんでしたが、Betaのころから49で実装予定と各所で書かれていました。