DreamweaverでSassファイルを編集しようとすると、テキストファイルという認識になってしまい、CSSのときのようにキーワードに色がついたり、コードヒントは出てきません。CSSと同じようにするには、次のように設定します。

1.アイコンを変える

ファイルパネル上では、謎のファイルという認識でDreamweaverのファイルアイコンではありません。ちょっと気持ち悪いのでCSSアイコンになるように変更します。

Dreamweaverを終了して、次のファイルをテキストエディタで開きます。

Win

C:¥Users¥<ユーザー名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥configuration¥Extensions.txt

Mac

/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/Extensions.txt

8行目を次のように変更します。

CSS:Style Sheets
CSS,SCSS:Style Sheets

これで再起動をすると、ファイルパネル上でもCSSのアイコンになります。
そのまま次の設定もする場合は、再起動しなくても大丈夫です。

2.コードカラーリング・コードヒントを使えるようにする

1.の設定だけではアイコンが変わるだけです。今度はコードカラーリングや、コードヒントがそのまま使えるように次のファイルを開きます。

Win

C:¥Users¥<ユーザー名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥Configuration¥DocumentTypes¥MMDocumentTypes.xml

Mac

/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/DocumentTypes/MMDocumentTypes.xml

MMDocumentTypes.xmlの142行目、<documenttype id="CSS"〜となっている行を編集します。

<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >

winfileextension・macfileextension属性の値を「css,scss」に変更します。

3. Zen Codingを使えるようにする

SassでZen Codingを使えるように設定します。Zen CodingでもSass固有のものが使えるように以下を追記しておくと便利です。

やり方は「DreamweaverでSassを使う時にZen Codingを利用可能にするカスタマイズ。」を参考にしました。年始の頃ちょうど困っているときに教えてもらいました。@_hideki_aさん、ありがとうございます!

以下はZen Codingのバージョンは0.7.5の場合です。次のファイルを開きます。

SassでZen Codingを使えるように設定します。Zen CodingでもSass固有のものが使えるように以下を追記しておくと便利です。

Win

C:¥Users¥<ユーザ名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥Configuration¥Commands¥ZenCoding¥zen_editor.js

Mac

/Users/<ユーザ名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/Commands/ZenCoding/zen_editor.js

zen_editor.jsの299行目の「return parse_mode;」の前に以下を追記します。

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

こんな感じになれば大丈夫だと思います。

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

			return parse_mode;

保存をすると、拡張子が.scssの場合でもZen Cordingが動くようになります。

4. .rbファイルを開けるようにする

最後にこちらはCompass使いな人向けです。デフォルトだとconfig.rbをDreamweaverで開けません。僕の場合はプログラムは書かず設定ファイルを簡単に編集できればいいので、Dreamweaver上で編集しています。

[環境設定]→[ファイルタイプ/エディター]を開きます。そして、[コードビューで開く]の欄に「.rb」を追記します。

スクリーンショットでは色々入っていますが、「.htaccess」「.htpasswd」を入れておくと、編集するときもDreamweaver上から開けるようになります。地味だけど便利な設定です。

.rbを入れたら[OK]ボタンを押します。これでconfig.rbファイルもDreamweaverで開けるようになります。