「css next」を使ってみよう！次世代CSSの記法でSassみたいに書ける！

次世代CSSとは？

次世代CSSとはCSS4のことだと思う方も多いかもしれません。ですが、CSSは各機能ごとに仕様が策定されるため、実はCSS4という概念は存在していません。ですので、ここでは将来使えるようになるCSSの各機能についてを次世代CSSと呼ぶことにします。ただし、これらの機能についてはWD（草案）レベルのものが多く具体的にいつ使えるようになるのかといったことは明らかにされていませんし、もしかすると廃止される可能性のある機能もあるということをあらかじめご了承ください。

なお、次世代CSSの機能についての策定状況は以下のURLで確認することができます。

https://www.w3.org/Style/CSS/current-work

次世代CSSの記法では、 sass のようにCSSの内部で 変数を定義し、var でその値を取り出すことができます。また、セレクターの中にセレクターを入れ子にして記述することができるようになります。このようにsass に似た記述をCSSだけで書くことができるようになるので、よほどコアなカスタマイズが必要になるケースを除けば将来的には sass などのCSSプリプロセッサーツールが必要でなくなる可能性があります。この記事では次世代CSSにはどのような機能があるのか、またどのように使用したらいいかをご紹介します。

次世代CSSの機能

var関数

次世代CSSではプログラミング言語のような変数の概念があり、カラーコードや数値などの情報を変数に定義しておくことができます。—（ハイフン二つ）から始まる文字列が変数としてみなされます。

好きなセレクターに変数を定義することができますが、:rootセレクターに変数を記述しておくのがオススメです。なぜなら定義した変数はそのセレクターのスコープの中でしか利用できないからです。例えば、サイト上にヘッダーとメインコンテンツがあったとし、ヘッダーのクラスが .header だった場合、.headerに変数を定義するとヘッダーの子孫要素でしか変数が参照できません。

var関数を使うことで変数の値を取り出すことができます。同じカラーコードをいくつかのセレクターで利用している場合は変数を使って値を定義しておくといいでしょう。

:root {
  --primary-color: #B64B39;
}

.header {
  color: var(--primary-color);//#B64B39
}

.link {
  color: var(--primary-color);//#B64B39
}

強化されたcalc関数

calc関数とはCSS内で計算式を可能にするための構文です。たとえば100%幅から20pxだけ引いた幅を設定したいときなどは以下のように指定できます。

.container {
  width: calc(100% - 20px);
}

実はcalc自体はすでにサポートされている機能なのですが、次世代CSSではさらにパワーアップします。

次世代CSSではcalc関数の中で先ほどのvar関数が使えます。そのことによって、ある変数に格納されている値をみて計算が実行されます。以下の例では.container幅は1440pxになります。

:root {
  --column-width: 120px;
}

.container {
  width: calc(var(--column-width) * 12);
}

カスタムメディアクエリー

また今までのCSSではメディアクエリーを記述する際は以下のようにその都度、画面サイズを記述する必要がありました。メディアクエリーが一つの箇所で書かれていればいいのですが、複数箇所に同条件のメディアクエリーを設定する場合、ブレイクポイントをその都度記述しないといけません。メディアクエリーが数値の場合、間違った数値を設定してしまう原因にもなります。

@media screen and (min-width: 768px) {
  .container {
    width: 100%;
  }
}

...

@media screen and (min-width: 768px) {
  .another-container {
    width: 100%;
  }
}

次世代CSSではカスタムメディアクエリーを定義できます。そのメディアクエリーを使い回すことができるので数値の記述ミスやブレイクポイントの変更に伴う複数箇所の訂正といった作業が不要になります。

以下の例では、–ipad-width というカスタムメディアクエリーを定義してそのカスタムメディアクエリーを複数箇所で使いまわしている例になります。

@custom-media --ipad-width (min-width: 768px);

@media(--ipad-width) {
  .container {
    width: 100%;
  }
}

...
@media(--ipad-width) {
  .another-container {
    width: 100%;
  }
}

cssのネスティング

今までのCSSでは以下のように .container の中の item クラスに対してスタイルを適応させたい場合は以下のような記述をしていました。

.container .item {
  width: 25%;
}
.container .link {
  color: #333;
}
.container .badge {
 font-size: 12px;
}

新しいCSSでは以下のようにネストして親子関係を作ることができます。

.container {
  .item {
    width: 25%;
  }
  .link {
    color: #333;
  }
  .badge {
    font-size: 12px;
  }
}

親である .container セレクターで、.item、.link、.badgeを囲んでしまえばいいので、以前のようにわざわざ.containerを各、子セレクターの先頭につける必要がなくなり記述量が少なくなりましたね。

また、あるクラスの擬似要素に対してCSSを記述したい場合などは以下のように & シンタックスが利用できます。ネストのルールに関してはsassのルールとほとんど変わりません。

.link {
  &:link,
  &:hover,
  &:visited {
    text-decoration: none;
  }
}

ブラウザのサポート状況

CSSの変数（CSS Variables）は以下のようにすでにIE以外の多くのブラウザーで使用可能です。

残念ながら、他の機能の対応状況についてはまだ草案段階や勧告候補なので、caniuseでも確認することができません。

次世代CSSを今使おう

残念ながら現時点ではご紹介したいくつかの機能は最新のブラウザーでさえ利用できません。そこで、新しいCSSの記述を可能にするためのツールを導入し、いち早く次世代CSSの書き心地を体験して見ましょう。

Node.jsをダウンロード

まずはNode.jsというツールをダウンロードします。

Node.jsとはもともとサーバーサイドでJavaScriptを動かすためのツールなのですが、昨今ではgulpやWebpackなどフロントエンドを便利に開発するためのツールとしても使われるようになりました。

https://nodejs.org/ja/

上記のURLからNode.jsをダウンロードしていただきダウンロードしたパッケージを解凍するだけでインストールが始まります。Node.jsの導入は非常に簡単です。

PostCSSとcss-nextをダウンロード

Node.jsをインストールすると、npm コマンドが利用できるようになります。npm コマンドを使うことで必要なツールをダウンロードできます。インストール前に必ず、任意のディレクトリーを作成し、npm init -y とターミナルに入力し、package.jsonを作成しておく必要があります。その後npm installで以下のように必要なパッケージをインストールします。

$ npm install postcss postcss-import postcss-url postcss-cssnext postcss-browser-reporter postcss-reporter

PostCSSをコマンドラインから利用できるようにするツールもそのあとにダウンロードします。

$ npm install postcss-cli --save-dev

PostCSSの各種設定

次に、PostCSSが利用できるようにファイルを作成しましょう。postcss.config.js を作成して以下のように記述します。

module.exports = ctx => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: [
    require("postcss-import"),
    require("postcss-url"),
    require("postcss-cssnext"),
    require("postcss-browser-reporter")
  ]
});

あとは、先ほど作成した package.json の scriptsという項目に以下のように postcss-cli を npm コマンドから利用できるように記述を追加します。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:css": "postcss input.css -o output.css"
},

これで環境が整いました。

早速、input.cssを作成し、そこに以下のように記述して見ましょう。

:root {
  --column-width: 120px;
  --primary-color: #FFF;
}
@custom-media --wide-screen-width (min-width: 1440px);
  
.container {
  color: var(--primary-color);
}
@media (--wide-screen-width) {
  .container {
    width: calc(var(--column-width) * 12);
  }
}

npm run build:cssとターミナルから入力するとoutput.cssが生成されます。その中身が以下のような結果になっていれば成功です！

.container {
  color: #FFF;
}
@media (min-width: 1440px) {
  .container {
    width: 1440px;
  }
}

まとめ

sass の多くの機能が次世代CSSでも実現できることがわかっていただけましたか？ PostCSS と css-next で次世代CSSの機能を今使うことができます。変数やプロパティセット、カスタムメディアクエリーなどが使えるので十分にsassの代わりになるはずです。また、将来的にはこれらのツールで書いたコードがブラウザーで動くコードになるので将来的に技術的負債になりづらいです。

ただ、PostCSSはcss-next以外にも様々なプラグインを入れることができ、CSSの記述ルールを追加することができます。ただし、たくさんのプラグインを入れることで本来のCSSのルールから大きく外れた独自のルールが出来上がり、チーム間でのルールの共有や後々にソースコードをメンテナンスする人に負担がかかってしまうケースもあります。PostCSSはcss-nextと必要最低限のルールを入れるだけにとどめておいた方がいいでしょう。

ぜひ今日から PostCSSとcss-nextを利用して未来のCSSを体験してみてください。