CSS Variables（カスタムプロパティ）が、Chrome 49でサポートされましたが、まだ試していなかったのでちょっと触ってみました。
おさらいでSassの場合
Sassは、非常にシンプルで分かりやすいですね。
$key-color: red;
.hoge {
color: $key-color;
}
CSS Variablesの場合
:root {
--key-color: red;
}
.hoge {
color: var(--key-color);
}
変数には、--ハイフン2つを先頭につけるのがルールです。
（最初見た時にちょっと抵抗感が。。でもすぐ慣れると思います）
どのセレクタに指定するかは自由ですが、Sassのようにセレクタ無しで定義はできませんので注意が必要です。
また、グローバル変数のように扱いたい場合は、:rootで指定します。
変数を呼び出す時には、var()関数を使います。
ちなみに、var()関数は、第二引数にもし変数が定義されていなかった場合のデフォルト値も入れられます。（あまり使うこと無いかもですが。。）
以下の例の場合、--key-colorが定義されていなくても、blueが設定される形になります。
.hoge {
color: var(--key-color, blue);
}
calc()関数を使いより便利に
CSS内で計算式ができるcalc()関数を使うことで、よりCSS Variablesが便利になります。
:root {
--base-size: 8px;
}
.sample {
font-size: calc(var(base-size) * 2);
padding: calc(var(base-size) / 4);
}
JavaScriptでCSS Variablesを取得する
JavaScriptでCSS Variablesを取得することができます。
:root {
--key-color: red;
}
var value = document.documentElement.style.getPropertyValue('--key-color');
console.log(value); // => red
CSS側でどんな変数が定義されているのかを見に行き、JavaScriptで何かしらの処理を入れられるようになります。
（が、具体的な使い方は思い浮かばず。。）
なお、取得ではなく、変更ができないかちょっと調べましたが、現状変更はできないようです。
無理やりやるなら、insertRuleを使い、追記で上書きする方法ですかね。
変更できました。（linerさんコメントありがとうございました）
以下方法で可能です。
document.documentElement.style.setProperty('--key-color', 'blue');
まとめ
現在、SassなどのCSSプリプロセッサを使うのが主流になっていますが、数年後CSS VariablesやCSS mixinなどを対応しているブラウザが広まってきたら、ネイティブのCSSでコードを書く時代がやってくるかもしれません。
今後に期待ですね。