Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。
Gulp・Grunt等でやる方法がありますが、コマンドプロンプト（通称：黒い画面）はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。
Dreamweaverを利用してWordPressでサイト構築（テーマ開発）することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。
試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。
2018年2月2日追記
文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。
Encoding.default_external = “UTF-8”
今回想定するDreamweaverのサイト設定
Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。
今回のサイト設定・構造
- サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
- テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています（この部分を適宜ご自身の環境に合わせて以降読み替えてください）。
空のディレクトリを作成しよう
以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。
scss ディレクトリ
このディレクトリにSassファイルを配置していきます。
css, css/min ディレクトリ
sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます（css/minにはminifyされたCSSが配置されます）
fonts, images, js ディレクトリ
とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません（笑）
configファイルを配置しよう
以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。
Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb
https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff
config.rb
これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。
THEME_NAMEディレクトリは適宜書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Encoding.default_external = "UTF-8" http_path = "/" css_dir = "/wp-content/themes/THEME_NAME/css/" sass_dir = "/wp-content/themes/THEME_NAME/scss/" images_dir = "/wp-content/themes/THEME_NAME/images/" javascripts_dir = "/wp-content/themes/THEME_NAME/js/" fonts_dir = "/wp-content/themes/THEME_NAME/fonts/" output_style = :expanded # :expanded or :nested or :compact or :compressed sourcemap = true line_comments = false relative_assets = true on_stylesheet_saved do `compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force` end |
config_prod.rb
Minify（圧縮）用のコンフィグ。
なお、output_styleを変更することで様々な出力を選べる。
- :expanded ・・・ 通常のCSS出力
- :nested ・・・ ネストされたCSS出力
- :compact ・・・ コンパクトなCSS出力
- :compressed ・・・ Minifyされた最も小さいCSS出力
また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。
THEME_NAME ディレクトリは適宜書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 | Encoding.default_external = "UTF-8" http_path = "/" css_dir = "/wp-content/themes/THEME_NAME/css/min/" sass_dir = "/wp-content/themes/THEME_NAME/scss/" images_dir = "/wp-content/themes/THEME_NAME/images/" javascripts_dir = "/wp-content/themes/THEME_NAME/js/" fonts_dir = "/wp-content/themes/THEME_NAME/fonts/" output_style = :compressed # :expanded or :nested or :compact or :compressed sourcemap = true line_comments = false relative_assets = true |
テーマディレクトリ直下に配置
上記ファイルを配置するとこんな感じ。
サイト設定でCompassを有効化しよう
サイト設定を開く
Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。
CSSプリプロセッサー － 一般設定
以下のように設定しておきました。
ファイルの保存時に自動コンパイルを有効にする
をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。
Compassの設定をしよう
Compassの設定項目で、
Compassを使用する
にチェックし、
Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。
これが出来たら保存をします。
コンパイルされるか確かめてみよう
Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。
scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。
数秒待つと
/~~~/main.scss は CSSに正常にコンパイルされました： /~~~/main.css
とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。
THEME_NAME/css/main.css
THEME_NAME/css/min/main.css
やったー！出来た！
まとめ
設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。
黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。
config.rb の設定方法でもっと良いやり方があれば教えてください。
