GUIコンパイラのPreprosを使ってSassのコンパイルを行う

初心者の人にとっておそらくもっとも簡単にSassのコンパイルが出来る方法は、GUIコンパイラを使用する方法です。

今回はそんなGUIコンパイラの中でも有名なPreprosの使い方についてです。

Preprosのインストール

Preprosは公式サイトからダウンロードしてインストールします。
有料版は29ドルかかりますが、永続的に使用できる無料版もあります（定期的にポップアップが表示されます）。

今回はSassのコンパイル目的で使いますが、SassだけでなくLessやPug（旧Jade）・CoffeeScriptなどのコンパイルや、ライブプレビュー・ファイルや画像の圧縮まで、Webの実装周りに必要な事に幅広く対応しています。

Preprosを起動すると下の画像のような画面が表示されます。

Sassのコンパイルのために、まずはコンパイルしたいファイルが入っているフォルダをPreprosにドラッグアンドドロップしてプロジェクトを作成します。

プロジェクトの作成が完了すると、下の画像のようにフォルダの中身が一覧表示されます。

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行に圧縮される