DreamweaverでSassする時にzencodingを利用する方法

やはりCSSを書く場合はSassを利用するのが早くてカッコいいので、Dw狂の私としてはlinkerさんの記事を参考にDwでSassの開発環境を整えました。

が、SassでCSSを書く際には「scss」ファイルを編集することになるので、拡張子が違うからなのか編集ファイルがCSSモードでパースされずにzencodingがうまく動作してくれません
これでは効率が上がったのか下がったのか微妙なところなので、Dwのzencodingを少し修正して「scss」ファイルでもzencodingの恩恵を受けられるようにしてみました。

Sassもzencodingもコードヒントも使いたい!という欲張りな人にはお勧めです。

zen_editor.jsの編集

zencodingのセッティングファイルのあるディレクトリから「zen_editor.js」を編集します。

Windows7の人は下記あたりにあるはず。
[ドライブ名]:\Users\[ユーザ]\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\Commands\ZenCoding

そのファイルの258行目あたりでパースモードを切り替えているようです。

関数内へ下記のコードを追記。

var edit_path = dw.getDocumentPath( "document" ); // 現在開いているファイルのパスを取得(DwのAPI)

if(edit_path.match(/\.scss$/)){ // パスの最後に「.scss」がある場合
	parse_mode = 'css'; // parse_modeをcssに
};

すると「scss」ファイルでもCSSモードでパースされるので、zencodingが動いてくれます。

後は「zen_setting.js」にsassで利用するスニペットなんかを登録してあげたりすると、すっごい便利!

'css': {
	'snippets': {
		"inc": "@include |",
		"ext": "@extend |",
		"mix": "@mixin |()\n"
	}
}

今回は「scss」ファイルを特定するのに無理やりパスを引っ張ってきたりしましたが、もしかしたらもっと簡単に特定できるかもです。