CSS が変数と関数に出会うと SASS になる～ SASS のインストール手順

プログラムと CSS の両方を書く人なら、CSS にも変数や関数のような、プログラミング言語にある機能があればいいのに、と思ったことがあるでしょう。CSS には繰り返しの多い記述が多いので、変数や関数があれば、CSS を書くスピードがずっと速くなるはずです。一般的には、そんな夢は実現できないと思われてきました…… でも今日は、SASS という新しいおもちゃを紹介します。SASS を使えば、CSS がずいぶん違ったものになりますよ～

SASS は Ruby で書かれたプログラムです。最大の特徴は、CSS を書くときに変数や関数を使えることです。SASS はコンパイルという方式で動きます。CSS を書き終えたら SASS にコンパイルを任せると、SASS がコンパイル済みの CSS ファイルを生成します。この仕組みによって、CSS の中で変数を設定できるようになります。この仕組みは少し難しく感じるかもしれませんが、分からなければ気にしなくても大丈夫です XD 使えれば十分です！

SASS の情報

公式サイト：http://sass-lang.com/
ドキュメント：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

また、SASS の文法には2種類あることに注意してください。1つは scss、もう1つは sass です。sass 文法は波括弧を使わず、Python のようにインデントで波括弧の役割を果たします。scss 文法は通常の CSS と同じように波括弧を使います。この2つはきちんと区別してください。私の解説では scss を中心に紹介するので、間違えないようにしてください XD

SASS には変数や関数以外にも多くの機能がありますが、私個人はあまり使いません。SASS では演算子も使えるので、加減乗除の計算もできます。詳しい機能については http://sass-lang.com/tutorial.html を参照してください。また、SASS を使う利点としてデバッグのしやすさがあります。先ほど説明したように、SASS はコンパイル時に CSS の文法エラーを検出します。例えばセミコロンの書き忘れがあれば、エラーを表示し、何行目かも教えてくれます！！ただ残念なことに、文法エラーを自動で修正してはくれません。例えば font-size を font-siae と書き間違えても、SASS は反応しません。

CSS で変数を使う利点は何でしょうか。もっとも多いのは、背景画像や文字サイズなどを設定するときです。多くのブロックで同じ文字サイズを設定する必要がある場合、例えば：

#top{
	font-size:15px;
	background:red;
}
#main{
	font-size:15px;
}

SASS を使うと、上のような CSS は次のように書けます：

$font_s:15px;
#top{
	font-size:$font_s;
	background:red;
}
#main{
	font-size:$font_s;
}

これが変数の使い方です。関数については、私が最もよく使うのは、ブラウザごとの互換性への対応です。現在の CSS3 の多くの機能は、Firefox、Chrome、IE 9 などでも使えるのですが、ブラウザごとに構文が違います。SASS の mixin（関数）を使うと、この問題をとても簡単に扱えます：

#box{
	border-radius:5px;
	moz-border-radius:5px;
	webkit-border-radius:5px;
}

SASS を使うと、構文は次のように書けます：

@mixin border-radius($x){
	border-radius:$x;
	moz-border-radius:$x;
	webkit-border-radius:$x;
}
#box{
	@include border-radius(5px);
}

「これだと短くならないのでは？」と思うかもしれません。それは、ここでの例が完全ではないからです。実際には、角丸はよく使われます。DIV ごとに角丸を指定するたびに、3行も書くのでしょうか？ mixin を使えば、1行書くだけで完全な border-radius が使えます。この方法は、ほかの多くの場面でも使えます。ぜひ自分で考えてみてください XD

SASS のインストール手順

SASS は Ruby で書かれているので、SASS を使う前に Ruby と Gem をインストールしておく必要があります。Windows の場合は RubyInstaller を使えば簡単です。インストーラは Ruby の公式サイト（http://www.ruby-lang.org/zh_TW/downloads/）で見つけられます。

Linux の場合は、以下の手順に従って Ruby、gem、SASS の順にインストールしてください。ここではソースからコンパイルしてインストールします。apt-get でインストールすると問題が起きることがあるためです。