Sassのコンパイル環境を作ろうとすると、今まではRubyの実行環境を構築して、Sass＋Compassが使えるようにしていたと思います。
しかし、デザイナーさんがちょっとcssを編集したいというときに、Rubyの実行環境を構築をお願いすることは、手順書ありきでもなかなか手間がかかるものでした。
それに、Ruby製のSass＋Compassはコンパイル時間が長いことや、Compassが既に開発停止していることを考えると、それらを使い続けることにこだわる必要はないでしょう。
今回はそのための対策として、Node.js の node-sass パッケージをインストールして、WebStorm / PHPStormから使えるようにするところまで紹介します。
ただ結局は、黒い画面を触ることにはなるのでデザイナーさんには敷居が高いかもしれませんが、Sass＋Compass環境を作るよりも簡単で、しかもコンパイルの実行速度が速いので、今から環境を作るならnode-sassが良いと思います。
#実施環境
下の環境で、PHPStorm＋node-sassの環境構築を実施しました。
- Macbook Pro (Retina, 15-inch, Mid 2014)
- Mac OS X 10.11.6 El Capitan
- PHPStorm 2017.1.4
- Node.js v6.8.1
#macOSにnpmをインストールする
ターミナル（Terminal.app）を起動して以下コマンドを実行します。
% brew update
% brew install -g node
% node -v
v8.4.0
~/.bashrc ファイルに以下追記する
export PATH="/usr/local/bin:$PATH"
#macOSにnode-sassをインストールする
npmのインストールが終わったら、今度はnode-sassをインストールします。
% npm install --global --save-dev node-sass
###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つです。
- nested ･･･ Scssでのネストがインデントされた形式で出力。デフォルト形式。
- expanded ･･･ ネストのインデントがない状態での出力。よくある見やすい形式。
- compact ･･･ セレクタごとに１行ずつに出力。ネスト構造は反映されない。
- compressed ･･･ 全てを一行で出力してコメントが消える。最も軽量。
#PHPStorm上でnode-sassの実行環境を設定する
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ディレクトリにコンパイルされたファイルが出力されるかと思います。