RAKUIN

Sublime Text 2だけで快適なSass/Compass環境を作ろう

別マシンにSublime Text 2+Sass/Compassの環境を構築しようとしたら、気持ちいいくらい手順を忘れてたのでメモ。

Scoutを立ち上げるのメンドクサイ。いちいちコンパイルするのもだるい。そんな怠け者な私のために。

やりたいこと

  1. Sublime Text 2だけでSass/Compassを使いたい。
  2. .scssを保存=自動コンパイルにしたい。

では以下で手順をご紹介。

SassとCompassのインストール

まずはこれ。Scoutなどを使ってた場合はうっかりしがちなので注意。無い場合、「compass: command not found」なんて言われます。言われました。では手順。全部黒い画面ですが… 負けるな。

  1. RubyGemsをアップデート
    sudo gem update --system
  2. Sassをインストール
    sudo gem install sass
  3. Compassをインストール
    sudo gem install compass
  4. インストール確認のため、バージョン確認。表示されればOK。(しなくてもOK)
    1. sass -v
    2. compass -v

Sublime Text 2にSass/Compass用のパッケージをインストール

ご存知、Package Controlからインストール。入れるべきは以下の4つ。

  1. Sass
  2. SCSS
  3. SCSS Snipets
  4. Compass

Compassでコンパイル(Build)するので、SASS Buildは入れず。インストールできたら、Tools>ビルドシステムからCompassを選択します。

config.rbを作成

コンパイルするためにconfig.rbというファイルが必要になります。プロジェクトのルートとなる場所に作ってあげましょう。中身はこんな感じ。

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

それぞれの意味は、こちらのサイトが分かりやすいので参照のこと。

自動コンパイル用のパッケージをインストール

ご存知、Package Controlから「SublimeOnSaveBuild」をインストールします。それだけ。

これでだらけきった私にも快適な環境が!