compass導入の手順

前回「sass・compassの導入について」という記事を書きましたが、sassをインストールするところまでで終わってしまったので、今回はcompassを導入するまでの手順を記しておきたいと思います。

compassとは

sassを元にしたオープンソースのフレームワークです。
compassを利用することにより、実に様々な恩恵を受けることができます。
http://compass-style.org/help/

最大のメリットは、なんと言ってもcssの記述量を大幅に減らせることに尽きると思います。故に
・記述を簡略化できるのでコードが肥大化しない
・見やすい
・メンテナンス性の向上

などのメリットが挙げられます。
これだけでも導入するメリットは十分だと思いますが、さらにスプライト画像の自動生成もできたりと、使いこなせばこなすほど、制作時間の短縮にもつながってきます。

インストール

今回もmac環境を前提に進めていきますが、compassのインストールにもターミナルを使用します。

が、

OS X Marvericks以降、Rubyとのバージョン互換性の問題によりcompassをインストールするコマンドを実行してもすんなりインストールしてくれません。コマンドを実行する前に、まずは一手間加えましょう。

xcodeのインストール

１.まずはapp storeから最新のxcodeをインストールしましょう。

２.新規プロジェクトを一つ立ち上げて、xcodeを使用可能な状態にしておきます。
Developperとして登録するために、apple IDの入力を求められたら自身のIDで登録します。

３.コマンドラインツールのインストール
メニューから
xcode > Open Developer Tool > More Developer Tools...
と選択。

アップルのデベロッパーページへ飛びますので、先ほど登録したDevelopper ID（apple IDと同一）でログインします。

（beta版ではなく、正式リリースされているバージョンを選択しましょう）
左側の + をクリックすると、項目が開いてインストール用のdmgファイルが出てきます。
これをダウンロードしてインストールしましょう。

Command Line Toolsのインストールが終わったら、下準備は完了です。

compassのインストール

上記までの手順がすべて完了したら、ターミナルを開いて

$ sudo gem install compass

と入力し、enterを押しましょう。
パスワードを求められるので、自身で設定しているユーザーパスワードを入力します。

$ Successfully installed compass-#.#.#

上記の一文が表示されていればインストール成功です。（#はバージョン）

$ compass -v

と実行してあげれば、インストールしたcompassのバージョンが確認できます。
アップデートするには

$ sudo gem update compass

とコマンドを実行します。

compassの起動

1.プロジェクトの作成

compassを起動するために、まずはプロジェクトディレクトリおよびファイルを作成します。compassに指示を出すのも、ターミナルを使用します。

cdコマンドでプロジェクトディレクトリを作成したい任意の階層まで移動します。

$ cd {$directory_name}

compassのプロジェクトを作成するには

$ compass create {$project_name}

と実行します。

すると、移動した{$directory_name}の階層に{$project_name}のディレクトリが生成され、さらにその中には
・config.rb
・sass/
・stylesheets/
が自動的に生成されます。

・config.rb
設定ファイルです。
ディレクトリの指定や、コンパイル方法の指定等を行います。
cssのディレクトリ名を「css」等にしている場合は、config.rbの
css_dir = "css"
と変更してください。

・sass/
編集元のsassディレクトリです。このディレクトリの中の.scss（または.sass）ファイルを編集します。
ディレクトリ名を任意の名称に変更した場合は、config.rbの設定変更も行う必要があります。

・stylesheets/
コンパイル先のcssディレクトリです。
任意の名称に変更した場合は、config.rbの設定変更も行う必要があります。

2.compass起動

いよいよcompassの起動です。

まずプロジェクトディレクトリまで移動します。

$ cd {$project_name}

そして

$ compass watch

とコマンドを実行しましょう。
すると、config.rbで指定した「sass」ディレクトリ内のファイルを自動的に監視してくれ、ファイルが保存されると同時に「stylesheets」ディレクトリにコンパイルしてくれます。

ひとまずこれでsassとcompassを使用する環境を作ることができました。

具体的に何がどう便利なの？と思う方は、公式サイトや、その便利さを丁寧に解説してくれているサイトがたくさんたくさんありますのでぜひ調べてみてください。
きっともうsassとcompassを手放せなくなりますよ。