エディタの機能でSassのコンパイルを自動化させてる方は多いと思います。
gulp等のタスクランナーで自動監視させても良いですが、今回はJetBrainsIDEでファイル監視、コンパイルする際の設定の確認、見直しを紹介していこうと思います。
ココらへんは人によって好みが分かれると思いますが僕がしている設定を公開しておきます。
JetBrains IDEでSassを使用する際（scss記法）に設定しておく項目
デフォの状態でもファイル監視さえしてしまえば勝手に書き出してくれるため、特に難しいことを考えなくても便利に使えるのですが、一工夫で更に便利に利用できます。
僕の場合は基本的にscssで記述し、出力された生のcssは直接編集しないので圧縮していまいます。そのあたりの設定が簡単なのでご紹介します。
前準備
SASSとファイル監視（FileWatcher）のプラグインがもしもデフォルトで入っていなければ入れましょう。
そして「ツール」→「ファイル監視」から新規（＋マーク）で「SCSS」と追加します。「global」設定にしておくといいと思います。
設定項目
まずは設定のスクリーンショットを張ります
見るべきポイントは「引数」、「拡張オプション」です。
他は好みですがデフォのままでもいいと思います。
引数
ここではデフォルトの状態にプラスして少し追記していきます。
具体的にはSassをコンパイルする際のフォーマットを指定します。
上記スクリーンショットでいうと
--style compressedこの部分ですね。これを追加してあげることで圧縮されたcssが出力されるようになります。
他のオプションとしては
--style compressed
//圧縮
.hoge{width:100px}.fuga{margin:10px}
--style nested
//デフォルト。↓のような形
.hoge {
width: 100px; }
--style expanded
//見慣れた形。圧縮じゃないならこれが見やすいかも
#hoge {
width: 100px;
}
--style compact
//コンパクトになります
.hoge { width: 100px; }こんな感じです。
拡張オプション
一番大事なのは４つのチェックボックス一番上の設定とコンソール表示です。
チェックボックスでは「Auto-save edited files to trigger the watcher」という設定をオフにすること。
この設定は簡単に言うとScssで記述したら記述した分勝手にコンパイルしてくれる機能です。便利ですよね。
ただちょっと罠がありまして…というのも構文的に正しくない場合やemmetで記述している際たまにそのままコンパイルを初めてしまいます。
当然エラーになるのですが、そのたびに内蔵のコンソールからエラーが吐かれてちょっと鬱陶しいのでこの設定は適宜プロジェクトに応じて変えてあげればいいと思います。
上記の「Auto-save edited files to trigger the watcher」をONにする場合。
コンソールの表示は「Never」に設定しています。
この設定にしておけば途中経過で変な記述をしていてもコンソールエラーで手が止まることがなくなります。
ただ当然、その場合エラーが表示されなくなるのでその点は注意です。
とはいえ「Auto-save edited files to trigger the watcher」は追記するたびに全てコンパイルしようとしますのでscssが膨れてきた場合オートセーブだとそもそも重くなります。
そこで解決策としましては…
そもそもphpstormには自動保存機能がついており、ウィンドウのフォーカスが外れたりしたら自動でセーブされるのです。当然scssも自動保存されるのでファイル監視機能でコンパイルが始まります。
⌘+s等で手動で保存してももちろんコンパイルされます。
その場合コンソールの表示は「On error」でも大丈夫でしょう。
エラーが出た場合でも気づきやすく、編集中重くなることも防げます。
まとめ
- 生のcssは基本編集しないので「–style compressed」で圧縮。
- 記述するごとにコンパイルさせる機能「Auto-save edited files to trigger the watcher」は便利だが使うならコンソール表示はNever推奨。
- エディタ自体の自動保存や手動保存でのコンパイルにて対応する場合コンソール表示はOn errorでもOK。
これだけおさえれば結構快適にscssかけると思います！
