Sublime Text 2 のPortable版でSASSをスタンドアローンで使う

2013/07/26 CSS Sublime Text Editor

Sublime Text 2 をportable版で使ってて、SASSもRubyとか入れずにポータブルにできないかと思ったら、そういうソフトを見つけたので設定メモ(Windowsのみ)。

Sublime Text 2 便利ですよね。 もうデフォルトのテキストエディタにしてしまいたいところだけど、メモとかには少し重いんで未だに秀丸と併用中。 Sublime Text 2 にはportable版というのがあって、USBメモリとかに突っ込んで使えるので、自分の場合はDropboxに入れて他の環境でも同じものを使っています。

で、Sublime Text 2 で SASS を使う時、通常はRubyをインストールしてgemで・・・みたいな流れになるけど、portable版を使っているのでSASSもポータブルにできないかなぁと思って調べてみたところ、あるもんですね。 とりあえず「Sublime Textって?」「SASSって?」というのは割愛です。(”SASSって” てなんか・・・)

zausさんという人が「Sassifier」というソフトを作ってるので、それを使用。 以下はその説明ページ。 Standalone SCSS compiler for SASS in Sublime Text 2

試した環境については以下の通り。

  • Windows 7
  • Sublime Text 2 ver 2.0.2 (portable)
  • プラグインは Package Control のみの状態

必要なソフトのダウンロード

まずは「Sassifier」をダウンロード。

前述のzausさんのエントリーの中ほどにある「standalone executable: Sassifier-v1p2-addin.7z」というリンクをクリック。 Sassiferをダウンロード ダウンロードされる拡張子が「.txt」になっているので、それを削って「.7z」に変更。 すると「Sassifier」というフォルダができるので、ひとまず必要なものはこれだけ。

設定とインストール

次に Sublime Text 2 を起動。

上部メニューから「Tools」→「Build System」→「New build System…」をクリック。 New build System…をクリック すると「.sublime-build」という拡張子で設定ファイルが開くので、zausさんのエントリー下部にある以下のコードをそのままコピペ。

{
	"cmd": ["Sassifier.exe", "$file"],
	"working_dir": "$packages/SASS/Sassifier",
	"selector": "source.sass"
}

そして保存する時のフォルダとファイル名が決まってて、以下の中に保存。

[Sublime Text 2 本体のフォルダ]\Data\Packages\Sass\SASS.sublime-build

「Sass」というフォルダは無ければ作る。

加えて、さっき解凍した「Sassifier」フォルダも、この「Sass」フォルダにまるごとコピー(=インストール)。 フォルダ構成をまとめると、以下のようになる。

[Sublime Text 2 本体のフォルダ]
└ Data/
 └ Packages/
  └ Sass/
   ├ Sassifier/
   └ SASS.sublime-build

これが整うと、Sublime Text 2 の上部メニューから「Tools」→「Build System」→「SASS」が選択できるようになってると思う。

うごかす

そしたら試しにscssファイルを変換してみる。 「test.scss」というファイルを Sublime Text 2 で開き、サンプルとして以下のように書いてみた。

#main {
	width:600px;
	a {
		text-decoration:none;
		&:hover{
			text-decoration:underline;
		}
	}
}

で、これを開いたまま、Sublime Text 2 の上部メニューから「Tools」→「Build System」→「SASS」を選択後、「Ctrl」+「B」キーを押す。 そしたら!うまいこと「test.css」というのができたっぽいです。 CSSファイルが生成された

生成された「test.css」の中身はこんなんだった。

/* -------------------------------------------------------------------------
 * !!! AUTOMATICALLY GENERATED CODE !!!
 * -------------------------------------------------------------------------
 * This file was automatically generated by the Sassifier compiler.
 * Compiled on:  2013/07/26 17:21:47
 */
#main {
  width: 600px; }
  #main a {
    text-decoration: none; }
    #main a:hover {
      text-decoration: underline; }

ちなみに文法が間違ってたりすると「Sassifier」が強制終了したりすることがあったのでちょっと怖い(笑)。 あとRubyとか使う本家と違いがあるのかとか、scssフォルダからcssフォルダに生成(自動生成先の指定)できるのかとか、そこらへんはまだよくわからんけど、とりあえずportable版でも動くものがあるってことで。

comments powered by Disqus