Windows環境にSCSS環境を構築する手順

WindowsにCSS プリプロセッサのSCSSを導入する手順メモです。

Macでは標準でインストールされているらしいですが、Windowsには入っていないので
公式サイトよりダウンロードします。

インストールの時、パスを通すことを忘れずに。（後でもできるけど）
インストールしたらコマンドプロンプトやcygwinなんかで

ruby -v

と入力して

ruby 2.0.0p0

とバージョン情報が出たらインストール成功です。

CompassはCSSを効率的に書くためのフレームワークのようです。
gemをアップデートして、compassをインストールします。

gem update --system
gem install compass

下記コマンドでバージョン情報が出たらインストール成功です、Commpassがインストールされたら自動的にScssもインストールされます。

compass -v

作業ディレクトリにassetsディレクトリを作成してconfig.rbを作成します

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

scssディレクトリにscssファイルを作成します。
scssファイルに変更があったら自動的にcssファイルにコンパイルするように下記コマンドを実行して監視しておきます。

sass --style expanded --watch scss:css

これで下準備完了。

Scssの文法については今回は割愛しますが、
Rubyとすごく似てるっぽいです。mixinとかすごく便利。

weblog