解 説

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

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

Sassのバージョン確認

Compassのバージョン確認

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

Packageのインストール

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

  • Sass
  • SASS Build
  • SCSS
  • SCSS Snippets
  • Compass
  • SublimeOnSaveBuild

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

config.rb ファイルの記述

config.rb ファイルの記述例

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

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

導入後の使い方

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