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

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

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

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

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

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

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

「【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も使えるようになったでしょうか。

まとめ

これまでのノウハウをそのまま投影できるって、お得ですよね。
そのままでも便利なツールがさらに効率的に!
そこでできた余裕を、新しいツールの鍛錬にあてるとしましょう。

7/29 記述を「SCSS」から「Sass」に修正、伴い一部表現を修正しました。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ