Windows環境でSass開発環境を構築する(基本編)

どうもー!
最近何かと話題のSass。
そんなSassに触れる機会も多くなり環境を構築してみたので、備忘録として残しておこうと思います!

まずはじめに

ワタクシの自宅PCはWindows8 64bitなので、それを前提に説明していきます。
コマンドで記述してるところは、コマンドプロンプトで実行します。(ほら、そこ!黒い画面無理とか言わない!)

本日のメニュー

  1. Rubyをインストールする
  2. gemでSassをインストール
  3. 外部エンコーディング問題回避の設定
  4. 実際にSassの記法でファイルを作成してみる
  5. CSSにコンパイルしてみる
  6. あとがき

Rubyをインストールする

Linuxなどではyumやrpmでインストールするんですが、Windowにはバイナリ(インストーラ)があるようなので、
以下のURLからダウンロードしてインストールしちゃいましょう。(便利ねぇ~)

インストールの流れは以下のサイト様で詳しく説明されていますよ。

インストールが完了したら、以下のコマンドでインストールできているか確認しましょう。(バージョンで2.0.0p195のところは違うけどねぇ~)

ruby -v
ruby 2.0.0p195 (2013-05-14) [i386-mswin32_100]

gemでsassをインストール

SassはRubyのライブラリで、gemというコマンドでインストールします。

gem install sass

上記コマンドを実行しSassをインストールしたら、Ruby同様に確認しておきましょう。

sass -v
Sass 3.2.14 (Media Mark)

外部エンコーディング問題回避の設定

Windows環境では文字コードに依存してコンパイルがうまくいかないことがあるそうなので、
以下のコマンドをコマンドプロンプトで実行します。

set LANG=ja_JP.utf8

上記の設定は一時的なものなため、いちいちめんどくさいって人は環境変数に設定しておくことをおすすめします。

  1. コントロールパネル>システムとセキュリティ>システム>システムの詳細設定の中にある「環境変数」ボタンをクリック
  2. システム環境変数リスト下の「新規」ボタンをクリック
  3. 新しいシステム変数内の変数名フィールドに「LANG」、変数値に[ja-JP.utf-8]を入力してOKをクリック

以上で、外部エンコーディング問題回避の設定が完了します。

実際にSassの記法でファイルを作成してみる

Ruby、Sassのインストールが完了したら
Sassが実行できるディレクトリ下にtest.scssファイルを作成してみましょう。

/* 例:C:\sass\test.scss */
$red: #f00;
$blue: blue;

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

上記は変数に16進数の色を代入して、htmlタグとbodyタグに指定しています。

CSSにコンパイルしてみる

上記で作成したSCSS形式のファイルを今度はコンパイルしてみましょう。

sass test.scss:test.css

コンパイルが成功すると上記のコマンドではtest.scssと同列でtest.cssというファイルが作成され、
Sassの記法で記述した内容が展開されて出力されているかと思います。

以上、Sassの開発環境環境の基本編でした。

あとがき

今回、基本編として紹介しておきながらなんですが、
このままだといちいちコマンドプロンプトでコンパイルしたりなんだりで
結構手間がかかるかと思います。
なので、次回はもう少し踏み込んで、エディタなどのツールを使って効率的に開発できる応用編を紹介しようと思います。