gulpやwebpack等プロジェクトで回していくと、nodeのバージョンの違いだとか、configがカオスになったりだとか、黒い画面が苦手だとか、納品間際にタスクがエラー起こして死んだりする問題があるわけで。
そういった人たちに向けて、GUIでのSassコンパイラはとても効果的だと思います。jsこねくり回しても結局できるファイルはテキストデータなんですから。
ざっと紹介すると以下の様なことができます。
- エラー行の報告
- ブラウザのライブリロード
- 圧縮
- ベンダープレフィックス付与
- FTP転送
- ファイル監視
- ソースマップ作成
もうこれだけで必要十分ですね。
まずはここからダウンロード。
「Hello」と出てくるのでプロジェクトファイルを投げ込みましょう。
![](https://sleep-sheep.info/wp-content/uploads/8EF89C54-3542-41C7-A768-567A2DAF85BE-1024x693.png)
cssファイルにフォーカスを当てたところCSSnextってのが出てきました。こういうものらしいです。いまはまだいいや…。
![](https://sleep-sheep.info/wp-content/uploads/09599B5C-051B-4EF8-AD02-77AFE72CC5B6-1024x693.png)
SynkBrowsersで他のブラウザや端末での動作の同期ができます。普段はチェック外しててもいいかも。
![](https://sleep-sheep.info/wp-content/uploads/59E50311-5051-433D-A84D-4F26FE37978E-1-1024x693.png)
style.cssという名前のcssを作りたいのでコンパイルされるcssの名前を変更しましょう。
![](https://sleep-sheep.info/wp-content/uploads/09492571-7465-47BF-BFDB-19C19F96537E-1024x693.png)
上書きする。
![](https://sleep-sheep.info/wp-content/uploads/3751D6B8-942C-4D54-9A0B-A6D6121C034D.png)
準備ができたらscssを選択して右下の「Proccess file」をクリックしましょう。
できました!
ブラウザのライブリロードも非常に高速で。Gulpとかこねくり回してる暇があったらjsの基礎でも覚えたいです。