Sass + Compass の基本導入と設定ファイル config.rb について

スポンサードリンク

明けましておめでとうございます！今年もどうぞよろしくお願いいたします。
2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。

さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か？」「Compass とは何か？」は省きます。インストールから設定、楽して監視開始、あたりを。

Sass + Compass を使うには？

まず基本のとこから一応さらっと！
最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby（と RubyGems）を入れて、Sass と Compass を入れて、となります。

Ruby + RubyGem インストール

Windows だったら RubyForge: Ruby Installer for Windows: Project Info から、「最新ファイルリリース」＞「1. RubyInstaller」＞「rubyinstaller-バージョン.exe」をダウンロードしてインストール。これで Ruby + RubyGem がインストールされます。インストール途中の「Add Ruby executables to your PATH」にチェックをつけておけば勝手にパスを通してくれて楽です。

Mac はデフォルトで入ってるので、それで大丈夫なはず。（ただしバージョンによっては最新のものを入れた方がいいかもしれません）

インストールできているか確認するために、Windows だったらコマンドプロンプト、Mac だったらターミナルで以下のように打ってみましょう。

ruby -v

インストールできていれば、Ruby のバージョンが出ます。

gem -v

インストールできれいれば、RubyGem のバージョンが出ます。RubyGem は perl の CPAN のような、これを入れることで他のインストールが楽になるものです。

RubyGem の使い方は、以下のようなかんじ。

gem install --remote <パッケージ名>

–remote は、リモートリポジトリ（RubyForge）から探すよ、ということです。–remote をつけない場合はリモートリポジトリとローカルリポジトリの両方から探してくれるようです。

Sass と Compass をインストールする

まず、RubyGem を最新にアップデートしておきます。Mac の場合、頭に「sudo 」を。

gem update --system

Sass のインストール

gem install sass

Compass のインストール

gem install compass

これで Sass + Compass を使う環境が整いました。Mac だと CodeKit を使うと手軽なのでそちらでいいかもしれません。CodeKit でも config.rb はあるはずです。

※その他 RubyGem について詳しく知りたい方は「RubyGems の使い方 – WebOS Goodies」が分かりやすいと思います。

いよいよ本題の confing.rb

config.rb は、Compass の設定ファイルです。通常プロジェクトと同じパスに置いて使います。
いまいち言葉では分かりにくいかもしれませんので実際に書いちゃいます。

基本の設定

http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "/"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

こんな感じです。1 つずつ見ていくと以下のような感じ。

http_path：サイトのパス
css_dir：CSS ファイルが書き出される場所
sass_dir：SCSS ファイルの場所
images_dir：画像ディレクトリ　※画像サイズを取得する時、この指定したディレクトリ以下を見るようです
javascript_dir：JavaScript ファイルの場所
output_style：SASS の書き出し方設定。:expanded, :nested, :compact or :compressed
「:expanded」{} で改行する形。よくみる CSS の記述形式はこれです。可読性たかし。
「:nested」Sass ファイルのネストがそのまま引き継がれる形。
「:compact」セレクタと属性を 1 行にまとめて出力。可読性低め。
「:compressed」圧縮して出力（全ての改行・コメントをトルツメ）。可読性は投げ捨て。
line_comments：CSS に SCSS での行番号を出力するかどうか。true or false

参考：Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design

色々やってみたい場合

その他にも設定できることは沢山あるので、気になった方はリファレンスをぜひ。おもしろいです。

たとえば、デフォルトでは config.rb の場所がプロジェクトのルートとして扱われますが、config.rb をルートに置きたくない場合「project_path」を設定すればいいみたいです。（私は同じ場所に置くことばかりですが）

環境設定を使って書き出しを分けてみる

よく使われていると思うオプションとして「environment」があります。これは環境設定（モード）で、:production と :development がデフォルトであります。

「環境設定って何？ん？」て感じかと思いますが、SASS の書き出し方（output_style）を、開発中は圧縮しない :expanded にしたいけど本番では圧縮した :compressed にしたいなあーなんて時に使えます。

config.rb の output_style を以下のようにすると、環境設定に基づいてコンパイルで出す内容を変えることができます。

output_style = (environment == :production) ? :compressed : :expanded

上記を説明すると環境設定（environment）が、本番環境（:production）だったら、output_style を :compressed にして、そうではなかったら :expanded にするよ、という意味です。

ちなみに、コンパイル時に引数をあたえることで「こっちの環境設定でコンパイルしてね」とすることも可能。config.rb には開発用として environment = :development と書いておき、通常はこちらで書き出しして、最後だけコマンドラインから以下のようにすれば production（本番用）にコンパイル、となります。

compass watch -e production

2013/01/05 追記：上記コマンドの「production」が「development」になっていたので修正しました。
優先される順番は、コマンドラインのオプション（引数）＞config.rb の内容、となるようです。

同様に、開発中は SASS の行番号を入れて、本番では行番号なし、とする場合。

line_comments = (environment == :production) ? false : true

おまけ：サイトのルートディレクトリを Compass で監視

compass watch で .scss の監視をスタートすることができますが、毎回コマンドを打たずとも、バッチファイルやシェルスクリプトを使うと楽に監視を開始できます。おすすめです。

Windows の場合

以下のように書いて start.bat あたりの名前で保存。config.rb と同じ場所において、start.bat をダブルクリックで監視が始まります。終わる時は Ctrl+C 。

compass watch

Mac の場合

CodeKit を使えば楽ちんですが、そうでない場合。
以下のように書いて start.command あたりの名前で保存。start.command を右クリック＞情報を見る＞オーナーに実行権限を与えておく。config.rb と同じ場所において、start.command をダブルクリックで監視が始まります。

#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch