Dreamweaver CC 2017のCSSプリプロセッサー機能を有効にしてSCSSを使ってみました

昨日の記事CSSコーディングにおける効率化の流れを考えるで書きましたが、DreamweaverをCC 2017にアップデートしました!

先にMacでやったら85%で止まってしまってにっちもさっちもいかなくなりましたが、実際はインストールされていた様子?2015が残っていたので、どうやら古いバージョンを削除する段階でフリーズしていた模様。おかげさまでCCデスクトップアプリは使い物にならなくなりました。どうやらMacOS 10.12への対応不具合も絡んでいるようなので、時間があるときに解決します…。ちなみにWindows10では問題なくアップデートできました。

で、目的のCSSプリプロセッサー機能を使ってみました!


スポンサーリンク

プリプロセッサーを使うための設定

サイト設定を行っていることが前提です。

【サイトの管理】を開く

dw2017_css_01

【CSSプリプロセッサー】で挙動やフォルダを設定

dw2017_css_02

【一般】メニューで【ファイルの保存時に自動コンパイルを有効にする】にチェックが入っていることを確認します(デフォルト)。また、SASS/SCSS Output file styleでコンパイルオプションを設定できます。nested、compact、compressed、expandedから選べるのでお好みで。

【参考】Sassでコンパイル時の出力を変更するオプション

それから【ソースと出力】でSASS/SCSSファイルを置くフォルダ、CSSを吐くフォルダを設定します。

dw2017_css_03

ここで設定したフォルダを監視して、保存時にコンパイルしてくれるわけですね。

実際に使ってみた

wordpressのテーマ作成中なので、scssフォルダをテーマフォルダに作り、CSSはテーマフォルダ直下に作る設定としました。

新規ファイル作成でSCSSを選択。

dw2017_css_04

test.scssというファイルにちょろっとコードを書いて、保存!

dw2017_css_05

CSSが生まれました!一度ファイルができた後は、保存のたびにコンパイル→上書きしてくれます。タイムラグは1~3秒くらいですかね?

日本語のコメントやフォント名を入れる場合は忘れずにCharsetの設定を。ってこれはRuby側の仕様なんでしたかね?最初つけるの忘れていて大量のエラーメッセージに遭遇しました笑

はっきり言ってめちゃくちゃ便利です。この調子でテーマ作りがんばるぞー!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*