GUIコンパイラのPreprosを使ってSassのコンパイルを行う
初心者の人にとっておそらくもっとも簡単にSassのコンパイルが出来る方法は、GUIコンパイラを使用する方法です。
今回はそんなGUIコンパイラの中でも有名なPreprosの使い方についてです。
Preprosのインストール
Preprosは公式サイトからダウンロードしてインストールします。
有料版は29ドルかかりますが、永続的に使用できる無料版もあります（定期的にポップアップが表示されます）。
今回はSassのコンパイル目的で使いますが、SassだけでなくLessやPug（旧Jade）・CoffeeScriptなどのコンパイルや、ライブプレビュー・ファイルや画像の圧縮まで、Webの実装周りに必要な事に幅広く対応しています。
Sassのコンパイルの仕方
Preprosを起動すると下の画像のような画面が表示されます。
プロジェクトの作成
Sassのコンパイルのために、まずはコンパイルしたいファイルが入っているフォルダをPreprosにドラッグアンドドロップしてプロジェクトを作成します。
プロジェクトの作成が完了すると、下の画像のようにフォルダの中身が一覧表示されます。
Sassのコンパイル設定
Preprosの画面でSassファイルを選択すると、右サイドバーが表示されます。
ここでSassのコンパイル設定が可能です。
細かい設定は下記の通りです。
| 項目 | 内容 | 備考 |
|---|---|---|
| OUTPUT PATH | 出力されるディレクトリを指定 | |
| Auto Compile | 保存時に自動でコンパイルするかどうか | Preprosが起動している必要あり |
| Source Map | ソースマップ（.map）を 一緒に出力するかどうか | |
| Output Style | 出力するCSSの書式設定 | 選択できるフォーマットは下記の3種類 「nested」→ネストがインデントされた状態で出力 「expanded」→一般的なCSSのフォーマット 「compact」→セレクタからプロパティを1行にして出力 |
| Autoprefixer | ベンダープレフィックスを自動で付与する | |
| Minify Css | 出力するCSSを圧縮する | チェックを入れるとOutput Styleの設定に関わらず、 1行に圧縮される |
Auto Compileにチェックを入れていればSassファイルの保存時にコンパイルが実行されますし、手動で実行したい場合は「Process File」をクリックします。
あとはPreprosを起動してSassを書いていけば、ちゃんとコンパイルしてくれるというわけです。
ただ、無料版だと定期的にポップアップが表示されてしまうので、よく使う人であれば購入したほうが良さそうです。
