2015年03月03日 web関連

dreamweaver CS6では、scss,sassなどが使えません。使えないというか、コードヒントやコードカラーリングが適用されず、テキスト扱いと同様になってしまいます。

検索すれば、多くのサイトで説明されていますが、以下の作業をすればコードヒントが使えるようになります。

scssを追加する手順

  • 1.DWの環境設定>ファイルタイプ/エディター内の「コードビューで開く」の箇所に「.scss」を追加します。(sassも使いたい場合は.sassも追加)
  • 2. アプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration 内の「Extensions.txt」アプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration ▸ DocumentTypes内の「MMDocumentTypes.xml」を編集

Extensions.txt

下のコード内の【】の箇所を追加。(分かりやすいように【】をつけていますが実際は不要です。)
HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,
AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,
CSS,【SCSS】,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents
HTM,HTML,HTA,HTC,XHTML:HTML Documents
SHTM,SHTML,STM,SSI,INC:Server-Side Includes
JS,JSON:JavaScript Documents
XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML Files
LBI:Library Files
DWT:Template Files
CSS,【SCSS】:Style Sheets
・・・

MMDocumentTypes.xml

下のコード内の【】の箇所を追加。(分かりやすいように【】をつけていますが実際は不要です。)
<documenttype id="CSS" internaltype="Text" winfileextension="css,【scss】" macfileextension="css,【scss】" file="Default.css" writebyteordermark="false" mimetype="text/css" >
上記の作業でDWを再起動してみてもコードヒントが動かない場合は、「Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration」内のMMDocumentTypes.xml、Extensions.txtをチェックしてみてください。

Macの場合は「control + スペース」でSpotlight検索を起動し、「Extensions.txt」、「MMDocumentTypes.xml」で検索してみると簡単に探せます。

ここまで、完了すれば、コードヒント、コードカラーリング、ファイルのアイコンまで、全て対応出来ます。

注意点

これは私もはまった落とし穴なんですが、DWの体験版をインストールしたことある方は、ライブラリ内を変更しないとコードヒント等が動きません

ライブラリ内を変更するには、「optionボタン」を押しながら、Finderメニューの移動を開きます。 そうすれば、隠しメニューの「ライブラリ」が表示されます。

Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/にもMMDocumentTypes.xml、Extensions.txtのファイルがあると思うので、これを同様に編集してください。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ピックアップ記事

[xserver]サブドメイン設定時の注意点

2014年08月23日 web関連
xserverのマニュアルにもありますが、サブドメインを設定すると、異なるURLで同じサイト(ページ)へアクセス可能になってしまうので、Googleに重複サイトと思われないように以下のように設定した.htaccessを設置します。 …
「[xserver]サブドメイン設定時の注意点」をはてなブックマークに追加

HTML上に配置した画像に隙間が出来るときの対処法

2012年02月10日 web関連
配置した画像に余計な隙間(スペース)が出来る HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。 解決策 CSSファイルに以下の設定を記述する。 [php]img { vertical-align: top; }[/php] …
「HTML上に配置した画像に隙間が出来るときの対処法」をはてなブックマークに追加

photoshopでfavicon(icoファイル)作成

2012年01月23日 web関連
icoformatICO Formatプラグインを追加 Photoshopでは、icoファイルを扱うことができないので、以下のプラグインをインストールして、icoを作成・保存出来るようにします。 Photoshop icoformatICO (Windows Icon) Format Plugin プラグインをダウンロード、解凍したら、ICOFormat pluginというファイルを、「Ap…
「photoshopでfavicon(icoファイル)作成」をはてなブックマークに追加

Dust-Me Selectorsで不要なCSS要素を削除

2013年10月30日 web関連
Dust-Me Selectorsで不要なCSS要素を削除
FireFoxのアドオン「Dust-Me Selectors」を使えば、一度も使われていないCSSの要素を簡単に削除することが出来ます。 以下のURLにFireFoxからアクセスするとインストール可能です。 Dust-Me Selectors…
「Dust-Me Selectorsで不要なCSS要素を削除」をはてなブックマークに追加

WordPressのオリジナルテーマのサムネイル作成

2013年11月06日 web関連WordPress
WordPressでオリジナルのテーマを作る時は、テーマ名などはstyle.css内にコメントで設定。 管理画面の外観>テーマのページに表示される、個々のテーマのサムネイル画像は、ファイル名「screenshot」、形式はPNG/JPEG/GIFのどれかにして、サイズは 300×225pxで作成。 http://wordpress.nyamuh.com/cont/base/base.htm…
「WordPressのオリジナルテーマのサムネイル作成」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy