12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SublimeTextでのsass・compass自動コンパイル

Last updated at Posted at 2016-04-28

先日、OS X 10.11 El CapitanのMac Book Proをもらった。
Win→Mac への移行でちらほら覚え書き。

ズボラなので、SublimeTextでの自動コンパイルMacに導入。
⌘+Sで上書き保存すると勝手にsass→cssでコンパイルしてくれるんだ!

<1>
SublimeText3をダウンロード
https://www.sublimetext.com

<2>
Package Control機能をつける
(↑いろいろダウンロードするための機能をつける)
http://futago-life.com/sublime-text3-wiki/first-step/install/package-control
※わかりやすい参考サイト

<3>
Shift+⌘+Pでテキストボックスが出てくるのでInstall Packageを入力して以下のパッケージをDL
・Sass
・SASS Build
・SCSS
・Compass

最後に保存したらコンパイルするパッケージを入れる
・SublimeOnSaveBuild

すると、自動でコンパイルされるように・・・・!なるはずが、ならなかった。
自動コンパイルはされてるんだけど、どうにもcompassのconfigを読んでない様子。
sassでコンパイルされてるみたい。

調べたら、Macでcompass自動コンパイルを有効にするにはコンパイル(ビルド)の設定をちょっと書き換えないとならないらしい。

Shift+⌘+Pでlist Packages→compass(クリックでフォルダ開く)→Compass.sublime-buildに↓を追加

filename
"osx": {
    "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims:$PATH"
  },

私のビルドファイルの設定↓

filename
{
  "osx": {
    "path": "/usr/local/bin:/Users/matsupome/.rbenv/shims:$PATH"
  },	
	"cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
	"working_dir": "$packages/Compass",
	"selector": "source.sass, source.scss",
	"shell": "true",
	"windows":
	{
		"cmd": "build.cmd \"${file_path}\" \"${project_path:${folder}}\""
	}
}

ビルドファイルを書き換えるとcompassでの自動コンパイルがされるようになる。
ターミナル立ち上げる必要もなく、koalaみたいなコンパイルソフト立ち上げる必要もなく、上書き保存するだけでコンパイルされる!
すっごい快適!

12
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?