2019.10.30

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

2019.10.30

コンパイルと言えば魔導物語。

つかざき

今回はAdobe Dreamweaver CCで書いたSCSSを自動でコンパイルしてくれる機能を社内共有も含め記事にします。

そもそもSCSS（SASS）ってなんぞ？コンパイルってなんぞ？ぷよぷよ？という方は奥田くんの記事にどうぞ。

え、まだ生CSS書いてるの？そんな人のための保守性に優れたScss入門

https://blog.triana.jp/?p=1625

どっこいしょ！インターンのおくだです。ちょっぴり刺激的なタイトルにしてみました。内容は私の愛してやまないSass(Scss)についてです。フロントエンドエンジニアやコーダーはもちろん、コーディングもするよっていうデザイナーさんも必見です。Sass(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

<body>
	<div>
		<p>( ˘ω˘ )</p>
	</div>
</body>

<body>

<div>

</div>

</body>

common.scss

body{
	background: #000;
	div{
		border: 3px solid #fff;
		padding: 20px;
		width: 200px;
		height: 200px;
		p{
			padding: 30px;
			height: 120px;
			width: 120px;
			background: #FF0000;
		}
	}
}

body{

background: #000;

div{

border: 3px solid #fff;

padding: 20px;

width: 200px;

height: 200px;

padding: 30px;

height: 120px;

width: 120px;

background: #FF0000;

}

この状態でcommon.scssを保存すると、自動でコンパイルされます。

自分は出力先のcssフォルダーを別に指定したので、

cssというディレクトリが自動で生成され、その中にcommon.cssが生成されました。

では、このcommon.cssの中身を見てみましょう。

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; }