Windows PC に Ruby と Sass を導入する方法

Category
CSS
Bookmark

Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語（って言い方でいいのかな）であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。

Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC（XPとVistaで試しました）にSassを導入する手順を紹介します。

Rubyのインストール

SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。

インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。

ruby -v

ruby 1.9 1p430(2010-08-16 revision 28998)

みたいのが出たらgemのアップデートに進んでください。

そうではなく、

「'ruby'は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。」

と表示されたら、このまま進めて環境変数を設定してください。

環境変数を設定する


マイコンピュータを右クリックしてシステムのプロパティから環境変数を開いて、「Path」の末尾にインストールしたRubyのbinフォルダのパスを加えます。 RubyInstallerでそのままインストールしていれば、;C:\Ruby191\bin とかそんな感じになると思います。

再び ruby -v をしたら、ruby 1.9 1p430(2010-08-16 revision 28998)みたいのが出てきたと思います。 出てこなかったら、恐らく環境変数のPath指定が間違っています。

gemのアップデート

念のため、

gem update --system

と打ってエンターを押して、gemをアップデートしておきます。 よく分からなくてもとりあえずやっておけば良さそう。

Sassのインストール

そのまま続けて、次のコマンドを叩きます。

gem install haml
 
gem install sass

これでSassはインストール完了です。
Rubyのインストールさえ済めば、Sass自体はあっと言う間にインストールできます。

2011-06-08 追記：Sass が Haml から分離したので、コマンドが変わったぽいです
参考：Sass（CSS拡張メタ言語）に関す資料 - NAVER まとめ

Sassを試す

ところで、コマンドプロンプトの行頭の表示は恐らく、

C:\Document and Settings\Owner

とかそんな感じになってるんじゃないでしょうか。 その場所をエクスプローラで開きます。

そこに、いつも使っているエディタでtest.scss というファイルを作成し、次の内容を記述します。

$red: #f00;
$blue: blue;

html {
  background: $red;
  body {
    background: $blue;
  }
}

保存をしたら、コマンドプロンプトで次のコマンドを叩きます。

sass test.scss test.css

C:\Document and Settings\Owner のフォルダを見てみてください。 test.css というファイルができているはずです。 それをいつものエディタで開くと、

html {
  background: red;
}
html body {
  background: blue;
}

となっていると思います（閉じカッコの位置とか微妙に違うかも）。
これで、Sassを使う事ができました。

Sassを、もう少し詳しく

cssファイルの生成形式

Sassは、ファイルを監視する機能が付いています。 この機能を使うと、.scssファイルを上書き保存した瞬間に.cssファイルを生成してくれるので、とても便利です。

やり方は簡単で、コマンドプロンプトから、

sass --watch test.scss:test.css

とするだけです。 終了したい時は Ctrl+c です。

また、.cssファイルを生成する時のフォーマットを選択する事ができます。

sass --style expanded --watch test.scss:test.css

にすると普通のCSSっぽくなって、

sass --style compressed --watch test.scss:test.css

だといわゆるminify化した物になります。

scssファイルを置く場所

今回は分かりやすくするために C:\Document and Settings\Owner に.scssファイルを置きましたが、もちろん自由な場所で作業する事ができます。 それには、sass **** というコマンドを叩く場所を変えるだけです。

CUIの知識がちょっとだけ要ります。 よくわからない場合は、コマンドプロンプトで下記のコマンドを試してみると良いかもしれません。

今いるディレクトリのファイルなど一覧（UNIX系で言う ls）
dir
ディレクトリ移動（ここでは My Documents に移動）
cd My Documents
ドライブ変更（ここではCドライブからNドライブに変更）
cd /d n:\

注意点

ファイルの文字コードはUTF8、改行コードはLFにしておいた方が無難らしいです。

あとは、Sassで.scssライフを満喫するだけです。