第15回からは、業務アプリケーションのような機能・仕組みを持ったサンプルアプリケーションを例に、これまで紹介してきたHTML5の機能や開発のためのツールをどう使っていくか説明しています。
Style記述の高度化: Less/Sass/Stylus
見栄えが良い画面やアニメーションなど動きのある画面など、画面のレイアウトが複雑になっていくと、CSSの記述量が増えてしまい、以下のような問題が起こりやすくなります。
- HTMLの構造が複雑になったときにセレクターを書き直す必要がある
- 変数での参照ができないため、似たようなスタイルの使い回しはコピー・アンド・ペーストになってしまい修正されると、他の場所も修正すべきかを全て確認する必要がある
これらの問題を解消するために、他のCSSフレームワークを使うこともできますが、新しい文法を学ぶ必要があります。CSSメタ言語であるLess/Sass/Stylusなら、CSSの文法を基にしながらも、入れ子定義・変数定義・制御構文などを記述できるので、上記のような問題に対処できます。LessとSassとStylusには以下のような違いがあります。
| Sass（SCSS） | Less | Stylus | |
|---|---|---|---|
| 最新バージョン （2015年12月11日現在） | 3.4.20 | 1.3.1 | 0.52.0 |
| インストール | Rubyのgem | Node.jsのnpm | Node.jsのnpm |
| 実装 | Ruby | JavaScript | JavaScript |
| 動作OS | Windows/Mac/Linux | Windows/Mac/Linux | Windows/Mac/Linux |
| サーバーサイドでの変換 | ○ | ○ | ○ |
| クライアントサイドでの変換 | × | ○ | ○ |
| ファイルの更新監視 | ○ | ○ | ○ |
| 出力ファイルの整形 | ○ | △(要プラグイン) | × |
| GUIツール | Compass.app （Windows/Mac/Linux） | Less.app （Mac） | Nib |
| 特徴 | 記法によりSass（括弧やセミコロンが不要）とSCSS（CSSに近い書き方）に分かれる。機能が豊富。継承や、for・ifなどの制御構文を書ける。Bootstrap4で使用されることが決まった | シンプルな記法で導入が容易。Node.jsを使用してクライアントサイドでの変換が可能 | コロン、セミコロンなどを半角スペースで代用でき、forやif文をプログラミングに近い感覚で書ける |
ここでは最初に登場したSass（SCSS）を使ってみます。特にここで説明するネストとmixinは、他のメタ言語にも同様の機能を持ちます。詳細は各言語のドキュメントを参照してください。
Sass（SCSS）のインストール
Sass（SCSS）のコンパイラをインストールするためには、Rubyをまずインストールしてください。インストール後、コンソールでruby –v を実行してバージョンが表示されれば準備完了です。
Rubyをインストール後、gem install sassを実行するとSass（SCSS）がインストールされます。使用するエディターによっては、Sass用のプラグインなどがありますが、ここではコマンドラインベースでコンパイルする方法を使います。
SassとSCSSは記法が異なるだけですが、今までCSSで実装を行ってきた人にはなじみやすいSCSSを使用します。SCSS用のスタイルシートは、.scssを拡張子とするファイルとして作成します。
ここではstyle.scssとして作成します。
