ウェブサイトのコーディングに用いるエディタは色々ありますが、その中の一つにAdobe Dreamweaverがあります。

2016年6月、そのDreamweaverの次期バージョンBeta版が公開されました。

何やら新機能が追加されているようなので、早速いじってみました！

ダウンロードしてインストールしてみると、アプリアイコンはこんな感じ↓↓

現行のDreamweaver CCと共存できるので、試用もしやすいですね！

起動してみると、見た目はPhotoshop、Illustratorと同じダークUIになっています！

これだけでも、変わった！！って感じがします（笑）

大きな変更点の一つとしては、Bracketsと統合した点です。

今までのDreamweaverで使用されていたコードエンジンは完全に捨て去り、エディタ部分はBracketsのコードエンジンにそっくりそのまま置き換わりました！

Bracketsの機能がDreamweaverでそのまま使えるという、かなり思い切った感がありますね！

例えば、こんな風にコードを折りたたんでコンパクトにしたり

タグを右クリックして、CSSをその場で編集できる『クイック編集』機能が使えたりします（ショートカットキー [Command + E]、[Ctrl + E]でも可能です）

さて、もう一つ大きな変更点は、CSSプリプロセッサーSASS、LESSが搭載されたことです。

今回は機能の多いSASSをDreamweaver CC Beta版で使う方法についてお話していきます。

CSSプリプロセッサーとは、CSSセレクタを入れ子で書くことが出来たり、同じ記述を変数化、関数化して何度も使えたりする、CSSの拡張機能です。

これを使えばCSSの記述効率・記述速度は格段に上がるのですが、通常であればSASSはRubyをインストールしなければ使えません(^^;

でもDreamweaver CC Beta版では、RubyをインストールしなくてもSASSが使えるんです！

サイト設定ダイアログで、左メニューの『CSSプリプロセッサー』をクリックします。

『CSSプリプロセッサー』→『Source & Output』と進み、SASSソースファイルのフォルダとCSSの出力先フォルダを指定します。

今回は、『scss』フォルダに保存されているSCSSファイル（SASSを記述したファイル）が、コンパイル（変換）されると『css』フォルダにCSSファイルを生成するよう設定しました。

次に『CSSプリプロセッサー』→『一般』で、『Enable compilation』にチェックを入れると、SASSを記述したファイルを保存した時点でcss形式のファイルに自動でコンパイルしてくれます。非常に楽チンです！

これで『保存』ボタンを押せば、もうこれだけでSASSを使う準備は完了です。

Rubyのインストールが不要なので、本当にすぐSASSが使えるようになってしまいます！

では、『scss/style.scss』ファイルを作成し、以下の記述をして保存してみます。

すると、『css/style.css』ファイルが自動で作られており、開いて見るとcss形式にコンパイルされています！

セレクタを入れ子で記述した部分が展開されているのが分かるかと思います。

これでCSSの生産性・効率もかなり上がりそうです！！

※詳しいSASSの書き方などは、今回は割愛します。

このDreamweaver CC Beta版はまだ正式リリースではなく、2017年にリリース予定だそうです。

しかし、今から待ちきれない私です（笑）