AtomエディターでSass+Compassの確認を楽にやりたい
せっかくブログを更新したので、最近のHTMLの勉強を兼ねてThemeでもいじってみようと思いたった。
そこで、SassとかCompassとかつかってCSSを書きたい。
SassとかCompassはコンパイルしてCSSを生成する。なので実際に確認するためには都度コンパイルする必要がある。
編集して保存したら勝手にコンパイルしておいて欲しい。
Atomエディターでコレをやる方法が私のググり力では見つけられなかったので、以下のようにした。
SassとかCompassは事前にインストールしてあるとする。
buildプラグインをつかえば簡単
保存のタイミングで処理を走らせるのにAtomのbuildプラグインが便利そうなのでこれを使う。
プロジェクト直下にbuild用の設定ファイルを用意して、そこにCompassをコンパイルするように書いておけばいい。
.atom-build.jsonというファイル名で
{
"name":"Compile Compass",
"cmd":"compass",
"args":["compile"]
}
あとはbuildの設定画面で、保存時に処理を走らせるチェックをonにしておくだけ。
注意点
一点罠があり、Atomエディターはアイコンをクリックして起動させるとPathが自分の期待通りに通ってない（= Atom上でcompassコマンドが叩けない）ので
atomコマンドから起動する必要があった。そうすれば期待通りにPathが通っている。
Macユーザーならターミナルを起動してatomと打ってEnterを押すだけ。
ほかの環境でどうなってるかはしらん。