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

URL: https://webrandum.net/prepros/
公開日: 2019-03-06
更新日: 2019-03-06
カテゴリー: コーディング
タグ: Prepros, Sass
出典: Webrandum（著者: サイトウ マサカズ）

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

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

## Preprosのインストール

![Prepros](https://webrandum.net/mskz/wp-content/uploads/2019/03/prepros-1024x537.png)

Preprosは[公式サイト](https://prepros.io/)からダウンロードしてインストールします。

有料版は29ドルかかりますが、永続的に使用できる無料版もあります（定期的にポップアップが表示されます）。

[Compile Sass, Less, Jade, CoffeeScript on Mac, Windows & Linux with Live ...](https://prepros.io)

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

## Sassのコンパイルの仕方

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

![Prepros起動画面](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_1-4.png)

### プロジェクトの作成

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

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

![Preprosの登録](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_2-4.png)

### Sassのコンパイル設定

Preprosの画面でSassファイルを選択すると、右サイドバーが表示されます。

ここでSassのコンパイル設定が可能です。

![Sassコンパイルの設定](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_3-3.png)

細かい設定は下記の通りです。

| 項目 | 内容 | 備考 |
| --- | --- | --- |

| 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を書いていけば、ちゃんとコンパイルしてくれるというわけです。

ただ、無料版だと定期的にポップアップが表示されてしまうので、よく使う人であれば購入したほうが良さそうです。

![Prepros](https://webrandum.net/mskz/wp-content/uploads/2019/03/Image_4.png)