Dw初心者がDreamweaver CCへEmmet(Zen-coding)、Sass導入してみた。

おひさしぶりです。
記事書いてない間、ひたすら就活。ただただ転職活動。泣ける。あ、でも決まりました。よかったです。
2年ほど夏を満喫できてませんが、友人後輩とプール行けたからいいんです。


さて、今回の記事について。
実はわたしDreamweaverを全く触ったことがありませんでした。
今までずっとCodaオンリー。
が、お仕事となると必須です。触りまくってこれから覚えます。
今回は、Dreamweaver CCのインストールと、Zen-coding,Sass導入時の覚え書きです。

まずはDreamweaver CCの体験版をインストールしました。

Dreamweaver CCをインストール

あらよっと
スクリーンショット 2013-08-25 17.57.53

Adobeのホームページ作成ソフト | Adobe Dreamweaver CCに移動して、Dreamweaver CC の体験版をダウンロードします。
ダウンロードはCreativeCloud経由で行うようです。
使用PCにCreativeCloudが入ってない場合、
CreativeCloudインストール → CreativeCloud起動 → CreativeCloudからAdobeの製品をインストール(今回はDwCC体験版)
ってな具合です。

インストール作業自体は特に迷うことも無いです。
無事Dreamweaver CCをインストール出来ました。
スクリーンショット 2013-08-25 18.08.17

次に、Emmet(Zen-coding)を、Dwに導入する方法について。

Dreamweaver CC でEmmet

GitHubのページから、
Emmet for Dreamweaverをダウンロードします。

使用PCにAdobeのExtensionManegerが入ってるなら、Emmet.zxpをクリック。
スクリーンショット 2013-08-25 17.52.39

あとはダウンロードしたファイルを実行すればDreamweaverCCでzen-codingできるようになってます。

初期の展開用ショートカットは command+E でした。
Codaでは control+E だったのでちょっと違和感。

SCSSからCSSへのコンパイル方法 1

さて、Sassも使う頻度高いので、Dreamweaverでいじることが出来ると嬉しい。
Dreamweaver CCではSCSSファイルの認識は最初からしてくれます。
ではCSSへのコンパイルは…?codaのプラグインだとショートカットキー1発だったんだけど、Dwは違うみたい。

ターミナルから、次のsassコマンド実行でコンパイルできます。
[crayon]
sass test.scss:test.css
[/crayon]
test.scssの内容をtest.cssにコンパイルします。

SCSSからCSSへのコンパイル方法 2

毎回のコンパイルの手間を省く方法もありました。
「SCSSファイルを監視して、ファイル更新のタイミングでCSSファイルのコンパイルを実行する」というもの。

ターミナルに入力するのは以下。
[crayon]
sass –watch test.scss:test.css
[/crayon]
これで、あとはSCSS保存するだけです。自動的にCSSにも反映されます。

監視を止めるには、ターミナルで control+C。

便利だけど、監視してるとゴリゴリメモリが消費されていく……

これは……(°Д°;

投稿者:

sejiijes

SEとWEBとデザインと事務処理に戯れる田舎会社員。

コメントを残す

メールアドレスが公開されることはありません。