Sassのコンパイル環境を作ろうとすると、今まではRubyの実行環境を構築して、Sass＋Compassが使えるようにしていたと思います。
しかし、デザイナーさんがちょっとcssを編集したいというときに、Rubyの実行環境を構築をお願いすることは、手順書ありきでもなかなか手間がかかるものでした。

それに、Ruby製のSass＋Compassはコンパイル時間が長いことや、Compassが既に開発停止していることを考えると、それらを使い続けることにこだわる必要はないでしょう。

今回はそのための対策として、Node.js の node-sass パッケージをインストールして、WebStorm / PHPStormから使えるようにするところまで紹介します。

ただ結局は、黒い画面を触ることにはなるのでデザイナーさんには敷居が高いかもしれませんが、Sass＋Compass環境を作るよりも簡単で、しかもコンパイルの実行速度が速いので、今から環境を作るならnode-sassが良いと思います。

実施環境

下の環境で、PHPStorm＋node-sassの環境構築を実施しました。

macOSにnpmをインストールする

ターミナル（Terminal.app）を起動して以下コマンドを実行します。

% brew update
% brew install -g node
% node -v
v8.4.0

~/.bashrc ファイルに以下追記する

export PATH="/usr/local/bin:$PATH"

npmのインストールが終わったら、今度はnode-sassをインストールします。

% npm install --global --save-dev node-sass

動作確認をするには、ターミナル上で実際にnode-sassコマンドを実行します。
node-sassの第一パラメータにはSassファイルパス、第二パラメータには出力先となるcssファイルパスを指定します。

% node-sass /path/to/theme/scss/style.scss /path/to/theme/css/style.css --source-map true --output-style expanded

実行すると、Sassファイルがコンパイルされてcssファイルが生成されます。

node-sassコマンドを実行するとき付けるオプションですが、コーディング効率化をする上でソースマップが欠かせないので有効化しておきます。

あと、出力形式はexpandedを指定しておけばGitマージしたときにコンフリクトが発生しづらいです。出力形式を compressed にすれば圧縮率が上がりますが、Gitコンフリクトが頻発するので個人的にはほとんど使いません。

--source-map true --output-style expanded

--output-styleに指定可能な出力形式は以下4つです。

Sassファイルを保存すると同時にコンパイルが実行されるように、File Watchersの設定を行います。

環境設定 > Tools ＞ File Watchers を開きます。

そして、[+] アイコンをクリックして、SCSSを選択します。

Edit Watcher画面は以下のように設定してください。

項目	設定値
File type	SCSS
Scope	Project Files
Program	/usr/local/bin/node-sass
Arguments	--source-map true --output-style expanded \$FilePathRelativeToProjectRoot\$ \$FileParentDir\$/css/\$FileNameWithoutExtension\$.css
Working directory	\$ProjectFileDir\$
Output paths to refresh	（なし）

僕の場合は、Sassファイルの編集中はコンパイルが実行されないようにして、Command+Sでファイル保存をしたときだけコンパイルが実行されるようにしています。
その場合は、同画面上にある、以下のチェックを外すだけでOKです。

[x] immediate file synchronization

これらの設定を行ったら、PHPStormを再起動します。
再起動は忘れがちですが、再起動するまでFile Watchersの設定が反映されないことがありますのでご注意ください。

以上により、cssディレクトリにコンパイルされたファイルが出力されるかと思います。