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

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