[Dreamweaver]Sassを使う時、コードヒントもZen Codingもイキにする環境設定のメモ

Dreamweaver

hakoishi

2012.04.03

Zoff PC作りました。hakoishiです。
PC用にちょっと軽めの度にした事もあってか、なかなかに快適。

さて、今回はDreamweaverでいつもの感覚でSassを使う為の環境の作り方をご紹介。
Dreamweaverで編集できるのはもちろんのこと、コードヒントもZen Codingもイキにできますよ！

コードヒントをイキにする

まず、なぜコードヒントが出ないか？ですが、dreamweaverにとってscssファイルがよくワカラナイ形式のテキストファイルだからです。
なので、Dreamweaverにcssファイルとみなしてもらうことにします。

具体的な手順は、こちらの過去記事を参照のこと。
scssをcssの一種として定義します。

[Dreamweaver]検索・置換対象ファイル拡張子を増やす。

「【1】Extensions.txt」で2箇所、「CSS」の後ろに「,SCSS」の記述を追加し、
「【2】MMDocumentTypes.xml」でもcssの箇所に下記のようにscssを追加します。


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

【3】は不要です。（コードビューの設定はcssと同じものが引き継がれるようなので）

さて、ここまで済んだらDreamweaverを再起動。
scssファイルが開けるようになって、かつコードヒントも表示されるようになったハズです。

Zen Codingをイキにする

さて、つぎにZen Coding。
今の状態でZen Codingを試すと、htmlモードで展開されてしまいます。
なので、やはりcssファイルとして認識できるように調整します。

※v0.7.5を前提としています。また、作業前に必ずバックアップを取ってくださいね。

C:\Users（ユーザー名）\AppData\Roaming\Adobe\Dreamweaver （バージョン）\ja_JP\Commands\ZenCoding

ここにあるzen_editor.jsの258行目からの5行を下記のように書き換えます。
cssについての2行を追加する形ですね。


getSyntax: function(for_abbr){
	var parse_mode = dom.getParseMode();
	
if (~dom.documentType.indexOf('CSS'))
	parse_mode = 'css';
	
if (~dom.documentType.indexOf('XSLT'))
	parse_mode = 'xsl';

そして念のためDreamweaverを再起動。
どうでしょう、Zen Codingも使えるようになったでしょうか。