iPhoneやiPad、AndroidなどのスマートフォンでWebアプリケーションを展開する場合、HTML5の知識が不可欠になってきました。
HTML5と言っても、各端末に合ったレイアウトやHTML構造の変更、新APIの利用など、対処する事が沢山あります。HTML5はFlash等のプラグインを置き換える目的で仕様策定が進められているため、より多くの事がプラグイン無しで実現できる反面、CSSやJavaScriptなどは複雑さを増してきます。
中でもCSSは構造的に記述する事が出来ないため、メンテナンス性の悪さが難点です。
ですが、最近はCSSを構造化できるメタ言語Sass（Syntactically Awesome StyleSheets）を利用して記述されるケースが増えています。HTML5のフレームワーク内でも利用されているので、少し触れてみる事にしました。
Sassとは
SassはCSSを記述するためのメタ言語です。CSSの上位レイヤーとして、次のような機能を持っています。- ネストしたCSSセレクタ、プロパティが記述出来る
- セレクタの継承が出来る
- 変数で値を記述出来る
- 同じようなCSSを関数に似たものを使って纏める事が出来る
- 別ファイルを容易にインポート出来る
- CSSファイルを圧縮出来る
Sassを利用する流れ
【Sassファイルを作成する】拡張子.scssファイル ↓ 【CSSへ変換する】sassコマンドを使用 ↓ 【CSSファイルが作成される】拡張子.cssファイル
Sassのインストール
SassはRuby言語で記述されているため、Rubyをインストールする必要があります。※ここではRubyインストールの説明は割愛します。
Ruby GemsでHamlインストール
# Hamlパッケージ内にSassが含まれています [user@centos ~]$ gem install haml # Sassのバージョンを確認 [user@centos ~]$ sass -v Haml/Sass 3.0.24 (Classy Cassidy)
Sassの基本構文
ネストルール
CSS構文の｛ ～ ｝の内部に、子要素にするCSSを記述します。コンパイル前：style.scss
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
↓
コンパイル後：style.css
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
親セレクタの参照
擬似セレクタ等を使用する際は「＆」記号を利用して親セレクタを挿入します。コンパイル前：style.scss
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
↓
コンパイル後：style.css
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
CSSプロパティのネスト
同じ接頭辞を持つCSSプロパティを纏める事が出来ます。コンパイル前：style.scss
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
↓
コンパイル後：style.css
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
コメントの扱い
CSS構文の複数行コメント「/* ～ */」と、Sass内では1行コメント「// ～」が使用出来ます。1行コメントは、CSS変換時に削除されるため、Sassファイル内でのみ使用可能なコメントです。コンパイル前：style.scss
/**
* CSSコメント
*/
body { color: black; }
// Sassコメント
a { color: green; }
↓
コンパイル後：style.css
/**
* CSSコメント
*/
body {
color: black; }
a {
color: green; }
SassからCSSへの変換
sassコマンドを使用して、CSSファイルを生成します。利用方法は簡単です。Sassファイルのコンパイル
# sass 作成したSassファイル名 出力するCSSファイル名 [user@centos ~]$ sass style.scss style.css
Sassファイルの変更監視
上のコマンドを使用すればCSSへコンパイルされますが、変更の度にコマンドを叩かなければなりません。
そのため、Sassにはファイルやディレクトリを監視し、変更された場合は自動的にコンパイルする仕組みが用意されています。
# 単一ファイルを監視する場合 [user@centos ~]$ sass --watch style.scss style.css # ディレクトリ配下の全てのファイルを監視する場合 # sass --watch 監視ディレクトリ:出力ディレクトリ [user@centos ~]$ sass --watch project/sass:project/css
監視コマンドを実行するとフォアグランドのジョブとしてコンソールを専有してしまうので、バックグラウンドジョブとして実行した方が良さそうです。
