去年あたりからちょくちょく耳にするようになったSASSを本格的に使ってみようと思う。便利そうだなとはわかっていたんだけど、環境を整えなければ使えないところがネックとなってなかなか手を出し辛かったのです。愛用しているコーディングツールCoda 2がSASSへの対応を進めてきているので、ここで波に乗っていろいろな景色を眺めてみたい。
準備
利用するSASSとCompassはRubyプログラム言語を便利にするツール（ライブラリ）として提供されています。このライブラリを簡単に効率よくインストールや更新してくれるのがRuby言語用のパッケージ管理システムRubyGemsです。Macをお使いの方は、RubyおよびRubyGemsは予めインストールされているのですぐに作業を始められます。その他の方はRuby公式より入手できます。
OS Xに予めインストールされているバージョンは
- Ruby 1.8.7
- RubyGems 1.3.6
となっていました。Ruby 1.8.7は１年前に引退したので、興味のある方は現在の安定板Ruby 2.0.0-p247にしておくことをオススメします。しかし、SASSとCompassのみ使用される方はRuby 1.8.7でも大丈夫なようです。
では、パッケージ管理システムRuby Gemsを最新版にアップデートしてインストール作業を行います。ターミナルを起動して以下のコマンドを実行してください。
$ gem -v #バージョンを確認
$ gem update --system #システムのアップデート
$ gem cleanup #古いバージョンの削除
インストール
CompassはSASSを機能拡張するライブラリなのでSASSは一緒にインストールされます。
$ gem install compass #Compassのインストール
$ compass -v #バージョン確認
$ sass -v #バージョン確認
バージョンが表示されればインストールされている確認となります。現在のインストールバージョンは以下のようになりました。（date: 2013/07/10）
- SASS 3.2.9
- Compass 0.12.2
運用
さて、準備は整いました。
サイトデータを置くフォルダ（ディレクトリ）へターミナルで移動します。方法はいくつかありますが比較的簡単な方法を説明します。
- ターミナルを起動し、サイトデータが含まれるフォルダをDockにあるターミナルアプリアイコンへドロップする
- サイトデータが含まれるフォルダでコンテキストメニュー（右クリック）を表示させサービスから「フォルダに新規ターミナル」コマンドを実行する（参考：フォルダをターミナルで開く）
ターミナルがサイトデータフォルダを開いた状態で表示されます。次にCompassの環境設定を行います。
$ compass create
自動的にCompassが運用するために必要なフォルダやファイルが作成されます。運用管理するために config.rb ファイルを開き、４−８行部分で設定を行います。
http_path = "/" #サイトのルートディレクトリ
css_dir = "css" #CSSのディレクトリ
sass_dir = "sass" #SASSのディレクトリ
images_dir = "img" #画像のディレクトリ
javascripts_dir = "js" #JavaScriptのディレクトリ
17行目をコメントアウト
line_comments = false #CSSに書きだした時に行数コメントを入れない
既存のサイトにCompassを設定する。
$ compass init
運用しているフォルダ名に config.rb の内容を書き換える。
以上でCompassの設定は終わりです。
実際に運用してみましょう！
sass/style.scss を作成して内容を書き込んで保存します。
$ compass compile
コマンドを実行します。
css/style.css が作成されて内容が反映されていると思います。ただ、保存するたびにコマンドを実行するのは面倒ですよね。以下のコマンドを実行すると保存すると同時にコンパイルしてくれます。
$ compass watch
このコマンドを終了するにはコントロールキーと’C’キーを同時に押す必要がありますのでお忘れなく。
おわりに
SASSとCompassを運用するにはターミナル操作が欠かせないので、まだまだ取っ付きにくい部分があるので普及するには時間がかかりそうだけど、この便利さを使いこなせるようになればかなり開発時間を短縮できるように思う。