第15回からは、業務アプリケーションのような機能・仕組みを持ったサンプルアプリケーションを例に、これまで紹介してきたHTML5の機能や開発のためのツールをどう使っていくか説明しています。

Style記述の高度化: Less/Sass/Stylus

 見栄えが良い画面やアニメーションなど動きのある画面など、画面のレイアウトが複雑になっていくと、CSSの記述量が増えてしまい、以下のような問題が起こりやすくなります。

  • HTMLの構造が複雑になったときにセレクターを書き直す必要がある
  • 変数での参照ができないため、似たようなスタイルの使い回しはコピー・アンド・ペーストになってしまい修正されると、他の場所も修正すべきかを全て確認する必要がある

 これらの問題を解消するために、他のCSSフレームワークを使うこともできますが、新しい文法を学ぶ必要があります。CSSメタ言語であるLess/Sass/Stylusなら、CSSの文法を基にしながらも、入れ子定義・変数定義・制御構文などを記述できるので、上記のような問題に対処できます。LessとSassとStylusには以下のような違いがあります。

表●Sass/Less/Stylusの主な違い
Sass(SCSS)LessStylus
最新バージョン
(2015年12月11日現在)
3.4.201.3.10.52.0
インストールRubyのgemNode.jsのnpmNode.jsのnpm
実装RubyJavaScriptJavaScript
動作OSWindows/Mac/LinuxWindows/Mac/LinuxWindows/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として作成します。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら