備忘録です．
Sublime Text 3, Package Controll は導入済みを仮定してます．
環境
- MacOSX 10.9
- Sublime Text 3
- Sass 3.2.19
- Compass 0.12.6
- rbenv 環境です．
Sass, Compass のインストール
Sass, Compass をインストールする前にRuby Gems のアップデートを行います．
sudo gem update --system
無事終わったらCompassをインストールします．
ちなみに，Compassをインストールする際Sassは一緒にインストールされます．
sudo gem install compass
rbenv rehash
一応動作確認もします．
sass -v
compass -v
Sublime Text 3 へパッケージの追加
Sublime Text 3 から.scssファイルをコンパイルするための準備をします．
Command + Shift + p + install + 以下
- Sass
- SASS Build
- Scss
- Compass
ちゃんと入ったかどうかは，Command + Shift + p + List Package で確認できます．
次にCompassのビルド設定ファイルにMacOSX用のPathを追記します．
Command + Shift + p + List Package + Compass を選択します．
Finderが開くので，Compass/Compass.sublime-buildを探して以下を追記します．
"osx" {"path": "/usr/local/bin:/Users/username/.rbenv/shims:$PATH" }
コンパイルしてみる
まず，任意の場所で適当にディレクトリを作成します．今回はsampleにします．
次にsample以下にsassディレクトリとCompassの設定ファイルを作成します．
設定ファイルは真似して書いちゃえばいいです．
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
output_style = "expanded"
Sublime Text 3に戻ってProject -> Save Project As... で
先ほど作成したsample以下を指定してプロジェクトを作成します．
適当にscssファイルを作成してsample/sass以下に保存します．
@import "compass"
div {
width: 200px;
}
最後に，Command + b でコンパイルをします．
sample/css以下にstyle.cssというファイルが生成されていればおしまいです．
ひとこと
誰かがさっき歌ってたSOS!!が，頭の中でCSS!!CSS!!ほらほら呼んでいるよ〜に置き換わってループしててこわたん