cssnext という新しい CSS の構文を、古い構文に変化してくれるトランスパイラがあったので試してみます。 JavaScript でいうところの Babel ですね。

インストール

npm でインストールできます。

$ npm install -g cssnext

変数

複数の場所で同じ値を使う場合変数を使うことができます。

/* a.css */

:root {
    --width: 200px;
}

body {
    width: var(--width);
    margin: auto;
}

--width が変数です。 :root で変数を定義すると var(...) で値を取り出せます。

これを b.css に変換するには $ cssnext a.css b.css とします。変換結果は以下のようになります。

/* b.css */

body {
    width: 200px;
    margin: auto;
}

var(--width) が 200px に展開されました。 calc(...) と組み合わせることもできます。

body > section {
    width: calc(var(--width) * 0.9);
    margin: auto;
}

これは以下のようになります。

body > section {
    width: 180px;
    margin: auto;
}

計算が展開されました。 calc(var(--width) + 1em) のように事前に計算出来ない場合、 calc(200px + 1em) のように calc が残ります。

カスタムセレクタ

同じセレクタを複数使う場合に自分でセレクタを定義できます。

@custom-selector :--button button, .btn;

:--button {
    margin: 1px;
}

:--button::after {
    content: "!";
}

:--button が自分で定義したセレクタでこの場合 button, .btn です。これは以下の用になります。

button,
.btn {
    margin: 1px;
}

button:after,
.btn:after {
    content: "!";
}

:--button::after はちゃんと button:after, .btn:after にしてくれるみたいです。

色

色の指定の仕方が増えます。

p {
    color: #FFCC8844;
    background-color: color(blue alpha(-10%) blackness(10%));
}

これは以下のようになります。

p {
    color: #FFCC88;
    color: rgba(255, 204, 136, 0.26667);
    background-color: #0000E6;
    background-color: rgba(0, 0, 230, 0.9);
}

#FFCC8844 は alpha も一緒に指定します。これまでは rgba(...) を使わないとできなかったので #FFF のような指定と見た目の一貫性がなくなってしまっていました。

color(...) は色を変化させる関数で、ここでは alpha(-10%) を指定して10%透明に blackness(10%) を指定して10%暗くしています。

#FFCC88 と #0000E6 は rgba(...) に対応しない古いブラウザのための指定だと思われます。

まとめ

変数や色指定は、これまで Less や Sass なんかが使われることが多かったと思います。

cssnext は未来の CSS をそのまま書けるので、将来そのまま動くかもしれないのが利点でしょうか。機能は Less や Sass のほうが強力ですが、複雑なことができない分メンテナンスが楽になるかもしれません。