【はじめてのSCSSコンパイル】DreamweaverでSCSSをコンパイルしてみた（OS：Windows10, Dw：CC 18.1）

私は現在、SCSS記法の勉強真っ最中です。。。
SCSS記法の勉強を初めた時、一番最初に躓いたのが「コンパイル」。

私は、黒い画面のアレ(コマンドプロンプト)が苦手なので、
Dreamweaverを使ってSCSSをCSSにコンパイルしています。

Dreamweaverを使ったSassのコンパイルについては、
「Adobe Creative Station」 の下記の記事を参考にして行っておりました。
>参照元：[Dreamweaverで覚える最新Web開発ワークフロー: Sass編 - Adobe Creative Station](https://blogs.adobe.com/creativestation/web-dreamweaver-sass-compile-and-options
 "Dreamweaverで覚える最新Web開発ワークフロー: Sass編 - Adobe Creative Station")

しかし、コンパイルというものがよくわからなくて、思いっきり躓いて焦ったものです（汗）
うっかりミスとかをしたときにどうなるかについてなど、画面キャプチャを交えてまとめてみました。


#環境について
* Windows 10 （Pro）
* Adobe Dreamweaver CC 2018 （18.1）

#SCSSファイル作成の流れ

##（1）新規ドキュメントを作成する。
SCSS用の新規ドキュメントを作成します。

![新規ドキュメントでSCSSを作成.png](https://qiita-image-store.s3.amazonaws.com/0/212038/a4f8b4ef-c15c-2e8c-4ae8-7736b7cd21f6.png)

ファイル(F) > 新規(N) 
で、新規ドキュメント作成画面を開き、
ドキュメントタイプ「SCSS」を選択して「作成」ボタンをクリックします。


そうすると、こんな感じの画面が出てきます。
![SCSSの新規ドキュメント.png](https://qiita-image-store.s3.amazonaws.com/0/212038/2e41136c-c891-8889-bcd7-dbf98332f4b3.png)


##（2）コードを記載する

新規ドキュメントを開いたら、よしなにコードを記載します。

![SCSSを適当に書いてみる.png](https://qiita-image-store.s3.amazonaws.com/0/212038/a5d99fbd-9b1d-d9a0-5701-a1ae161532a0.png)


##（3）保存する

SCSSドキュメントを保存します。
（ドキュメントタイプ「SCSS」を選択して「作成」したドキュメントは、保存時の拡張子が自動的に”.scss”になります。）

![新規ドキュメントを保存する.png](https://qiita-image-store.s3.amazonaws.com/0/212038/c4041179-dfc9-4950-dbba-2b48b239f9eb.png)

しかし、個人的には、コードを書く前に保存をした方が良いような気もしてます。。。
（理由は後述の「[その1：コンパイルができない](https://qiita.com/ka-ko/items/76812a5148f96ad34445#%E3%81%9D%E3%81%AE1%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84 "その1：コンパイルができない")」をご確認頂ければと思います）


##（4）コンパイルする

保存が終わったら、SCSSをコンパイルします。

![保存するとコンパイルが選べるようになる.png](https://qiita-image-store.s3.amazonaws.com/0/212038/a6b61af0-f99b-fb52-f7c6-e1c959510c13.png)

ツール(T) > コンパイル(M)
で、コンパイル出来るようになります。

ちなみに、コンパイルをクリックすると・・・

![コンパイルしたら、CSSができた.png](https://qiita-image-store.s3.amazonaws.com/0/212038/25d08dad-0c5d-f222-7ca3-4b1958c7da8c.png)


デフォルト設定では、コンパイル元のSCSSと同じフォルダーにCSSファイルが作成されます。


##（5）期待通りの内容でコンパイルできたか確認する

生成されたCSSを開いて、中身が期待通りの内容になっているか確認します。

![無事にコンパイルできました.png](https://qiita-image-store.s3.amazonaws.com/0/212038/3a780088-9fa1-a51d-0d13-80df2f8be649.png)
Dreamweaverでコンパイルする場合、SCSSの内容に誤りがあった場合もCSSファイルが生成されます。
そのため、CSSの内容を「開いて確認する」工程は、個人的には大変重要に感じております。
（記載に誤りがあった場合どうなるかについては、「[その2：CSSにエラーメッセージが表記される](https://qiita.com/ka-ko/items/76812a5148f96ad34445#%E3%81%9D%E3%81%AE2css%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%8C%E8%A1%A8%E8%A8%98%E3%81%95%E3%82%8C%E3%82%8B "その2：CSSにエラーメッセージが表記される")」をご参照ください）


#Dreamweaverを使ったコンパイルでハマった事

完全なるウッカリミスですが、、、
コンパイル時に個人的に「あれっ？」となった事例をご紹介します。


##その1：コンパイルができない

###【現象】コンパイルしようとして、コンパイルが選べない
![コンパイルが選べない.png](https://qiita-image-store.s3.amazonaws.com/0/212038/8325769a-4d79-2537-1b50-f26ee93e8d77.png)

###【対応】ドキュメントを、拡張子”.scss”で保存後、コンパイルをする。

そもそも保存しないと、コンパイルは選択できないのでご注意を。



##その2：CSSにエラーメッセージが表記される

###【現象】コンパイル後、CSSを開いたらエラーメッセージが記載されている。CSSの内容も期待通りのものができていない。
![保存してコンパイルしたらエラー.png](https://qiita-image-store.s3.amazonaws.com/0/212038/efa707ba-1aeb-9b5a-94ff-e7db5a2d8756.png)
CSSを開いてみると、コメントアウトでErrorの文字がずらり（泣）
初めて見た時には、大変驚いたものです。。。

###【対応】元のSCSSに、エラーの元になるものが無いか確認する。

![誤字があると、エラーメッセージが出ます_補足つき.png](https://qiita-image-store.s3.amazonaws.com/0/212038/823ed6e7-2f9c-4f42-7b5c-6630d7b28ff5.png)

誤字脱字などがある場合、コメントアウトでエラーメッセージがずらりとならびますのでご注意ください。


##その3：コンパイルすると＠charset が消失する

###【現象】SCSSの最上部に”＠charset "utf-8"; ”と記載してコンパイルすると、CSS側では”＠charset "utf-8"; ”の表記が消失してしまう
![charsetが消失する.png](https://qiita-image-store.s3.amazonaws.com/0/212038/7d136ce6-41e4-5f94-a6d8-f89b58c09fa7.png)
バグなのか、仕様なのか、どちらかよくわからないのですが、消失してしまいます。

###【対応】どこかしらに日本語や全角英数字を記載してコンパイルする

何故かはわからないのですが・・・

![contentプロパティに日本語を書いてもcharsetが表示される.png](https://qiita-image-store.s3.amazonaws.com/0/212038/e5a13f53-4e09-6872-7837-ae366180935b.png)
contentプロパティに日本語のテキストをいれてみたり、

![通常のコメントを上に記載してコンパイルするとcharsetが一行目に出る.png](https://qiita-image-store.s3.amazonaws.com/0/212038/8b9bdeaf-f787-291c-d7e6-af125f03b34d.png)
日本語で通常のコメントを”＠charset "utf-8"; ”の上に書いたり、

![通常のコメントを下に記載してコンパイルするとcharsetが一行目に出る.png](https://qiita-image-store.s3.amazonaws.com/0/212038/9f672e8a-41cd-ddf6-aa68-4e45f225ed16.png)
”＠charset "utf-8"; ”の下に書いたり、

![通常のコメントを真横に記載してコンパイルするとcharsetが一行目に出る.png](https://qiita-image-store.s3.amazonaws.com/0/212038/caf4d8a9-31fd-cf68-c0e0-d00c0b3f1def.png)
”＠charset "utf-8"; ”の横に書いたりしてコンパイルすると、
CSSの１行目に”＠charset "utf-8"; ”が表示されるようになりました。

「日本語or全角英数字」で「CSS側にも記載が残るように書く」というのがポイントのようです。


###【補足】半角英数字や１行コメントを記載した場合は消失する
色々試してみたのですが、、、
![1行コメントは記載してもコンパイルするとcharsetが消失.png](https://qiita-image-store.s3.amazonaws.com/0/212038/af73c382-2ff8-57f9-598b-34e72480d0eb.png)
![コメントの内容が半角英数だと消失する謎.png](https://qiita-image-store.s3.amazonaws.com/0/212038/2d960305-19e2-413f-bafb-7f862e94adc6.png)
何故か、半角英数字だけだったり、1行コメントの方に日本語を残した状態でコンパイルすると、
CSSからcharsetの記載が消失してしまいました。

※できれば消えないでほしいので、今後のアップデートに期待しています。


---

※他にも、勉強中に躓いたネタが色々あるので、よしなに追記できればと思います。