DreamweaverでSassを使う時にZen Codingを利用可能にするカスタマイズ

DreamweaverでSassを使う（SCSSを書く）時、Zen Coding for Dreamweaverを利用しようとしてもデフォルトでは上手く動作しません。調べてみると、.scssファイルを編集している際のドキュメント解析モードが「text」と判定されるためです。

そこで、Zen Codingのコアファイルをカスタマイズし、SCSSを書く際もZen Codingが利用できるようにする方法をご紹介します。

Windows: C:\Users\（ユーザ名）\AppData\Roaming\Adobe\Dreamweaver CS（バージョン番号）\ja_JP\Configuration\Commands\ZenCoding\zen_editor.js
Mac: /Users/（ユーザ名）/Library/Application Support/Adobe/Dreamweaver CS（バージョン番号）/ja_JP/Configuration/Commands/ZenCoding/zen_editor.js

zen_editor.jsの299行目（v.0.7.5の場合）を下記のように変更します。

			if (dom.URL.lastIndexOf('.scss') > -1) {
				parse_mode = 'css';
			}
			
			return parse_mode;

コードの内容ですが、dom.URLで取得したファイルパスに「.scss」が含まれる場合はZen Codingのパースモードを「css」とするものです。判別にファイルパスを利用するので、先に拡張子.scssでファイルを保存してください。