Adobe Dreamweaver CCでSCSS(SASS)を簡単に自動コンパイルする。


今回はAdobe Dreamweaver CCで書いたSCSSを自動でコンパイルしてくれる機能を社内共有も含め記事にします。
そもそもSCSS(SASS)ってなんぞ?コンパイルってなんぞ?ぷよぷよ?という方は奥田くんの記事にどうぞ。
目次
前提
①Dreamweaverを使っている(重要)
②コーディングしているサイトをDreamweaverのサイトの管理機能で管理している(超重要)
しかし②を行ってない方もいると思いますので、今回は完全に新規から始めるところから説明します。
サイト管理機能でサイトを管理する
まずは、SCSSをコンパイルするためにサイトのデータを一式Dreamweaverの管理下に置きます。
説明するための例として、ローカルで「テストサイト」というサイトを作ります。
ファイル構成は
[テストサイト]
┝ index.html
└ [scss] – common.scss
となっております。
common.scssが今回コンパイルしたいscssファイルです。
ファイル構成が確認できたら、Dreamweaverに戻り、上のメニューから サイト → 新規サイト と進んでください。
サイト設定画面が表示されますので、管理上でのサイト名を記入し、ローカルサイトフォルダーに先ほど制作したテストサイトを指定します。
自動コンパイルをするか設定する
賢明なみなさまはもうお気づきかもしれませんが、このタイミングでSCSSの自動コンパイル指定ができます。
横のメニューに「CSS プリプロセッサー」というメニューがありますので、そちらをクリックしてみましょう。
すると「ファイルの保存時に自動コンパイルを有効にする」というチェック項目があると思いますので、そちらにチェックをしましょう。これにて完了!
……もちろんそんなことありません。
今はまだ「SCSSを自動コンパイルする設定をONにした」だけです。
Dreamweaverは「どのファイルを自動コンパイルするの?」と迷っていますのでこれを指定してあげます。
自動コンパイルするSCSSを指定する
CSS プリプロセッサーの中に ソースと出力 というメニューがありますのでそちらをクリックしましょう。
すると、「ソースフォルダー」という項目がありますので、ここにSCSSが入っているディレクトリを指定します。
このソースフォルダーとして指定されたディレクトリ内にあるSCSS(またはSASS)ファイルが、自動コンパイルの対象となります。
その際自動でコンパイルされたcssを別のフォルダーに出力したい場合は「出力フォルダーを定義」でディレクトリを指定してあげましょう。
これにて作業完了です。
実際にコンパイルしてみる
早速テストでコンパイルしてみます。
コンパイルするにはソースが必要なので、index.htmlとcommon.scssにソースを記述します。
index.html
1 2 3 4 5 |
<body> <div> <p>( ˘ω˘ )</p> </div> </body> |
common.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ background: #000; div{ border: 3px solid #fff; padding: 20px; width: 200px; height: 200px; p{ padding: 30px; height: 120px; width: 120px; background: #FF0000; } } } |
この状態でcommon.scssを保存すると、自動でコンパイルされます。
自分は出力先のcssフォルダーを別に指定したので、
cssというディレクトリが自動で生成され、その中にcommon.cssが生成されました。
では、このcommon.cssの中身を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 |
body { background: #000; } body div { border: 3px solid #fff; padding: 20px; width: 200px; height: 200px; } body div p { padding: 30px; height: 120px; width: 120px; background: #FF0000; } |
バッチリとコンパイルされてますね。
コンパイルする際に、出力する形も設定できます。
CSS プリプロセッサーの中に SASS /SCSS: Outputfile style というラベルがありますので、そちらから選択してみてください。
DreamweaverでSCSSをコンパイルする方法のまとめ
①サイト管理でサイトを設定する。
②設定画面の「CSSプリプロセッサー」「ソースと出力」で出力するための指定をする
です。とても簡単ですね。楽すぎる。
ぜひ、お試しください。
以上、つかざきでした。
記事を書いた人