【scss】初心者向け!DreamWeaverでscssを触ろう!

【scss】初心者向け!DreamWeaverでscssを触ろう!

最近やっとscssを触る機会がありDreamWeaverでやってみたら思っていたより便利で簡単に触ることができたので今回はそれを共有したいと思います!

 

 

用意するもの

 

DreamWeaverでscssを使うために用意するものは2つです!

それはDreamWeaverと構築をする上での保存場所(フォルダ)です!
この2つさえあれば他に用意するものはありません。

 

scssを使う準備

 

DreamWeacerでscssを使うには事前に少しだけ設定を行う必要があります。
その設定がなくてもscss単体をいじるだけなら問題はないのですが、
サイト全体を構築していく上では大切な設定になります。
また、その設定をすることにより作業が楽になります。

その必要な設定とは、「サイトの定義」です。

まず[ サイト ] → [ 新規サイト ] でhtmlやcssを管理し格納するフォルダを指定します。

これでほぼ下準備は完了です!
このサイト設定をしてあげることでscssをコンパイルするのがとても楽になります。

 

コンパイルしてみる

 

実際にコンパイルするとき、先ほどのサイト設定の部分で少しだけ設定が必要になります。
それは[ css プリプロセッサー ] → [ 一般 ] にある「ファイルの保存時に自動コンパイルを有効にする」にチェックを入れることです!

これにチェックを入れることで保存時に自動でコンパイルしてくれるようになります!
ちなみに、チェックを入れなくてもDreamWeaverは「F9」でコンパイルしてくれるのでその都度F9を押せばコンパイルはしてくれます。

また、サーバーにアップする際に必要なソースマップもここで生成の設定をすることができます。
(サイトの設定をしないとソースマップを生成することができないので注意!)

[ css プリプロセッサー ] → [ソースと出力 ] からコンパイルの保存先を指定することができるので保存先を変えたい場合もここで設定することで変えることができます。

 

まとめ

 

いかがでしたでしょうか。
個人的に事前に用意するものなどがあったりして少しscssを触るのが未知だなと思っていて不安だった部分があったので、それをこんなに簡単に使うことができてもっと早く触っておけばよかったと思うほどでした。

保存するときに自動でコンパイルしてくれるのでコンパイルするの忘れてた!ということがなくてとても便利なので、ぜひこの機会にDreamWeaverを使ってみたはいかがでしょうか。

 

参考

Dreamweaver CCでSassを使ってCSSファイルをコンパイルする(CSSプリプロセッサー機能)

Dreamweaver での CSS プリプロセッサーの使用