Sublime Text3でSassとCompassを使えるようにする

SassとCompassの導入がすでに行われており、Sublime Text3でscssファイルを保存すると自動でコンパイルするための方法です。
そうするとKoalaなどを使用する必用もなく手軽にSassが使えます。

SassとCompassがインストールされているか確認するにはターミナルから次のコマンドで確認します。
バージョンが表示されればインストールされています。

Sassのバージョン確認

sass -v

Compassのバージョン確認

compass -v

Sassの導入とComoassの導入は以下を参考にしてください。

Packageのインストール
config.rb ファイルの記述
導入後の使い方

Packageのインストール

Sublime Text3ではShift＋command＋Pで「Install Package」を選択してから以下を導入します。

Sass
SASS Build
SCSS
SCSS Snippets
Compass
SublimeOnSaveBuild

あとは、プロジェクトを作成してその中に「config.rb ファイルを作成」します。

config.rb ファイルの記述

config.rb ファイルの記述例

require 'compass/import-once/activate'

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

コードの意味
http_path：サイトのパス
css_dir：cssが書き出される場所
sass_dir：scssファイルを入れる場所
images_dir：画像ディレクトリ
javascripts_dir：javascriptファイルのディレクトリ

複数のディレクトリでSassを使いたい場合、それぞれにconfig.rb ファイルを入れると良いですが、面倒な場合は以下の記述でconfig.rb以下にあるディレクトリすべてが対象になります。

css_dir = "/"
sass_dir = "/"

導入後の使い方

メニューの「ツール」から「Build System」を選択して、出てくるメニューからSASSのコンパイルなら「SASS」を選択します。Compressedの状態でCSSを書き出したい場合は「SASS-Compressed」を選択します。もし、Compassを使用するなら「Compass」を選択します。Compassを使う場合は必ずサイトにするフォルダ内に「config.rb ファイル」を入れておく事を忘れないようにしましょう。