SassとCompassを使うとコーディング作業がすこぶる捗りますが、コンパイルが少々面倒なのがネックです。
ターミナルコマンドでのコンパイルは複数ディレクトリのコンパイルには不向きだし、GUIアプリケーションは起動とプロジェクト毎の設定が億劫です。
そんな中、SublimeTextでのコンパイルが思いの外便利だったので、MacOSにおけるSass/Compassの導入方法と便利な機能を備忘録を兼ねて紹介します。

SassとCompassをインストール

※9月16日現在、上記コマンドでMac OSX 10.11(El Capitan)にインストールすることはできませんが、-nでバイナリファイルの場所を指定するとインストールできます。

SublimeTextの設定

パッケージのインストール
・Sass
・SASS Build
・SCSS
・Compass

Macの場合は、コマンドパレットからList PackageでCompassを選択し、ファイル“Compass.sublime-build”にosxを追加する。
※USERNAMEの箇所は自分のユーザー名が入ります。

“config.rb”を設置

プロジェクトのルートにconfig.rbを作成し、下記の内容を記述。

※css_dirにはcssファイルの出力先ディレクトリを、sass_dirにはsassまたはscssファイル格納ディレクトリを設定します。

上記設定でのフォルダ構成例

Sassファイルの編集とコンパイル

config.rbで指定したsassファイル格納ディレクトリに、.sassまたは.scssを作成し、編集します。

コンパイル(ビルド)はコマンド+Bで行います。
コンパイルに成功すると、config.rbで指定したcss格納ディレクトリに.cssが作成されます。

次のページではSassの便利な機能について紹介します。

1 2