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でファイルを保存してください。

• ※ 普段MacのCodaでSCSSを書いているので（Codaの補完を利用しています）、簡単な動作検証しかできておりません。ご了承ください。