統合開発環境のWebStormとPhpStormは、デフォルトでSASS/SCSS(Compass)に対応しています。
ただ、何故か新規ファイル作成メニューにSCSSファイルの項目が無かったので追加することにしました。
これは簡単なテンプレートを用意することで可能になります。この方法を使えば他の拡張子のファイルも作成出来るようになりますね。
SCSSファイル用のテンプレートを用意する
左サイドバーに見えるプロジェクトエリアを右クリックし、「New > Edit File Templates…」を選択します。

「File and Code Templates」という名前のウインドウが開きます。左上の緑色のプラス(+)ボタンをクリック。

新しいテンプレートが作成されるのでName(テンプレート名)、Extension(拡張子)、その下のダイアログボックスにテンプレートの中身を記述します。

今回はSCSSファイルのテンプレートを用意したいので、Nameには「SCSS File」、Extensionには「scss」と入力します。その下のダイアログボックにはマルチバイト(日本語)に対応するため以下の1行を入れておきました。
@charset "utf-8";
入力し終わったら右下の「Apply」をクリック。そして「OK」をクリックして閉じます。
すると、新規ファイル作成メニューにSCSSファイルが出てきました。以上になります。
