この記事の監修者
Sassを使ってみたいけどGulp？も難しそう…。VScodeのプラグインを使うやり方は簡単そうだけど自分は違うエディタ使ってるし….。こんなお悩みありませんか？
実はGulpのようにコマンドも使わず、エディタプラグインのように開発環境に依存せずSassをコンパイルできる「Prepros」という超便利なツールがあるんです！
僕も今はPreprosを使ってSassのコンパイル環境を構築してますが、かなり快適になりました。
この記事ではPreprosの利便性や導入方法、使い方まで徹底解説します。
Preprosをマスターして、快適にSassの環境を構築してみましょう！
また、先にSassについての知識を整理しておきたい方はこちらの記事を参考にしておいてください！
prepros(プリプロス)とは
Prepros(プリプロス)は、Sassをはじめとした様々な言語をコンパイルできるGUIツールです。
コーディングしたいファイルをソフトにドラッグするだけで、即時にSassのコンパイル環境が構築できるという優れもの。
ソフト自体は1ライセンス29ドル(※2024年1月時点)、日本円だと約4,200円で買い切り購入ができますが、無料で使い続けることも可能です！
購入してない場合、使用中に購入促進のポップアップが表示されますが、なにか機能が制限されることもありません。
これからご紹介する便利な機能を知ると、「ほんとに無料で使っていいの…！？」となってしまうくらい素敵なツールです！
※ちなみに僕は「より快適に使いたい」+「開発者への感謝」の意味で購入して使ってます…！
PreprosでSassを使うメリットとデメリット
メリット
ここではツールとしてのメリットをご紹介します。
まずインストール型のソフトなので使用しているエディタに影響を受けないという点があります。また、Windows、mac、LinuxなどのOSにも依存せず使用できます。
さらに、設定ファイル（json）をGitなどで共有することもできるため、複数人での開発も簡単に進めることができます。
それでいて公式推奨のDarts Sassにも対応しているということで、今後変化するSassの機能にもそのまま対応し続けることができます！
Sassをコンパイルする手段として多くの人が「VScodeなどのエディタプラグイン」か「Gulpなどのタスクランナー」を使っているかと思いますが、Preprosはエディタプラグインより多機能で、Gulpよりも導入ハードルが低い、良いとこどりのツールとも言えます。
デメリット
多機能ではありますが、元々搭載されている内容に制限はあるので、自分好みに開発環境をカスタマイズできる上級者の方からすると、拡張性に物足りなさを感じる可能性はあります。
また、言語は英語のみです。ただこの点については、使う際に抑えておきたいポイントは限られているので、必要な部分は当記事で説明していきます！
Preprosのダウンロード方法
それではPreprosを自分のPCに導入してみましょう。
公式サイトの「Download Free Unlimited Trial」ボタンをクリックします。
お使いのOSを選択するとzipファイルがダウンロードされます（3分程度）
Zipファイルを開き、アプリケーションを起動すると、
Preprosが立ち上がります！
Preprosの使い方
「コンパイルしたいファイルをPreprosにドラッグ」….これだけです！
ドラックしたらPrepros内にファイルが同期され、同時に”prepros.config”という設定内容が記載されたファイルも生成されます。
試しに.scssファイルにコードを書いて保存してみましょう。
コンパイルに成功すると右上に「Success」と表示され、CSSファイルが生成されているのが分かるかと思います！
- sassファイルと同階層にcssファイルが生成
- cssファイル内に”.css” と “.css.min”の二つ生成
たったこれだけの作業でSassの環境構築ができたわけです（簡単ですね！）
とりあえずSassを書いてみたいという方は、同じような手順で試してみてください！
Preprosの機能一覧
次にPreprosの基本機能を紹介していきます。
- 他言語に対応したコンパイル機能
- プレビュー機能
- 自動ブラウザリロード
- スマホ端末とも同期してプレビュー
- Autoprefixer
- 文法のエラーチェック
- CSS／JS ／画像の圧縮
- FTP・SFTPクライアント機能
他言語に対応したコンパイル機能
実はSassだけでなく、Less、Stylus、Pug、Haml、Slim、CoffeeScript、TypeScriptといった様々な言語のコンパイルにも対応しています。
プレビュー機能
Preprosにはhttpやhttps対応の内臓サーバーが搭載しているため、コーディングしたファイル内容をワンクリックでブラウザにプレビュー（反映）させることができます。
また、XAMPPやMAMP、WordPressやShopifyなどと連携して、代理でページを表示（プロキシ）させることも可能です。
自動ブラウザリロード
ブラウザにプレビューしている内容は、ファイルの保存と同時に自動で変更箇所も反映させることができます。コーディング効率化には欠かせない機能ですね。
スマホ端末とも同期してプレビュー
内臓サーバーの機能があることで、URLを入力するかQRコードを読み取ることで、スマホやタブレットなどの別端末にもブラウザプレビューすることができます。
コーディング中からリアルタイムで実機確認ができるので、レスポンシブ対応の精度も上がりますし、かなり効率化も図れます。
Autoprefixer
設定範囲でプロパティに対するベンダープレフィックスをコンパイル時に自動で付与することができます。
文法のエラーチェック
エディタにも備わっている機能ですが、文法に誤りがある場合はPrepros内でエラー箇所を分かりやすく表示してくれます。
CSS／JS ／画像の圧縮
CSSやJSなどのコーディングファイルは、minファイルとしてコードを一行にまとめた状態でコンパイルさせることが可能です。
画像については、ファイル内で選択したデータをワンクリックで圧縮する機能が備わっています。
FTP・SFTPクライアント機能
「FileZilla」や「Cyberduck」などのFTPソフトと同等の機能も搭載しているので、サーバー情報を登録すれば、Preprosだけでコーディングデータを本番環境までアップロードすることもできます。
設定で「Upload Automatically」にチェックしておけば、ファイル更新の都度本番サーバーへも自動でアップロードしてくれます。
Prepros画面説明と基本な使い方
全体像はこんな感じです。すべて触ることもないかと思いますので、よく使う機能の部分に絞って説明していきます。
ブラウザプレビュー
右上サーバーボタンから「Open Preview」でブラウザプレビューできます。
ワンクリックでプレビューされるのはPreprosのルートに置かれているファイルです。
上の画像の場合はルートに「htmlファイル」を置いてないのでこんな画面になります。ここからhtmlファイルが置かれてるディレクトリに進んでもらえれば表示されます！
他端末とブラウザプレビューを同期
サーバーボタンから「Network Preview」に進むと現在接続しているネットワークのIPアドレスとQRコードが表示されるので、これをスマホなどの端末側で読み取ればプレビューを同期できます。
同期させる端末は同じネットワークに繋いでおきましょう。（PCは自宅回線のWi-Fi、モバイルは4G回線など異なるネットワークに接続されてる場合は同期できません）
コンパイルのログを確認
上段の「Logs」からコンパイル結果が時系列で表示されます。
画像の圧縮
対象の画像を選択すると右側にメニューが表示されます。
「Image Quality」で圧縮後の画像クオリティを選択しますが、ここは50％（最大圧縮）でいいです。「Preserve Original Image」にチェックが入っていると元画像を残したまま、複製した画像を圧縮して生成します。
あとはOptimize Imageボタンをクリックするだけです。
オリジナルには”-original”というファイル名がつき、圧縮された画像が複製されています。
Preprosの画面からも、画像がどれくらい圧縮されたのか確認できます。
コンパイルファイルの設定
次にSassファイルのコンパイルに関する設定についてです。ここで自分好みのコンパイル環境を作っていきます。
ファイルを選択すると右側にコンパイル設定メニューが表示されます。
設定した内容を反映させたい場合、エディタからファイルを保存するか、右下「Process File」ボタンをクリックすればOKです。
OUTPUT FILE
CSSファイルのコンパイル先を設定できます。クリックするとディレクトリ（フォルダ）が表示されるのでそこから選択します。
上の画像は、publicフォルダ＞cssフォルダを選択しています（コンパイル後のCSSファイル名は変えることもできます）
コンパイルしてみて、指定したディレクトリに生成されるか確認してみましょう。
FILE OPTIONS
基本はどちらもチェックを入れたままでいいと思います。
Auto Compile
保存時に自動でコンパイルさせるかどうか。
Source Map
css.mapのソースマップファイルを生成するかどうか。（これが無いと開発ツールで確認した際にsassファイル記述箇所が特定しづらくなります）
Autoprefixer
Prefix CSSはベンダープレフィックスを自動付与するかどうかの設定です。チェックを入れておいていいでしょう。
p {
color: red;
writing-mode: vertical-lr;
}プレフィックスが必要なwriting-modeプロパティを記述してコンパイルすると、
/* コンパイル後 style.css */
p {
color: red;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}こんな感じでプレフィックスを自動でつけてくれるので便利です。
MINIFY-CSS
Minify CSSはコンパイルするCSSファイルを圧縮するかどうかの設定です。チェックを入れてコンパイルすると、
/* コンパイル後 style.css */
p{color:red;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}このように一行に圧縮され、ファイル容量を軽量化できます。
ただ圧縮してしまうと記述内容がよくわからなくなるので、開発中はチェックを入れずに、最後完成の時だけチェックを入れてコンパイル→軽量化した状態で納品、という流れが良いかと思います。
プロジェクト設定項目
次にプロジェクト全体に共通する設定内容を説明します。複数人で開発をする際、設定ファイルを共有するために触るイメージです。（個人開発でも関係する内容は含まれてます）
General
「Export Project Settings」にチェックが入っているとprepros.configファイルが生成されます。
共同作業をする場合はこちらのファイルを共有することで同一環境を簡単に構築できます。一人で作業する場合はあまり触ることもないのでチェックを外しておいてもいいです。
CSS Tools ＞ Sass
色々ありますが、個人開発時は先ほど説明したコンパイルファイルの設定で触っている内容と重複します。共同開発する場合はこちらで設定しておきましょう。
Process Automatically
保存時に自動コンパイルするかどうか。
Create Source Map
.mapのソースマップを生成するかどうか。
Tasks ＞ Prefix with Autoprefixer
コンパイル時にベンダープレフィックスを付与するかどうか。
Tasks ＞ Minify
コンパイル時にCSSファイルを圧縮するかどうか。
Output ＞ Replace Segments
生成するフォルダ名を決める項目。デフォルトでは「scss」や「sass」ファイルと同階層に「css」というフォルダを生成することになってます。
ここは変える必要ないでしょう。
CSS Tools ＞ AutoPrefixer
オートプリフィクサー（ベンダープレフィックスの付与）に関する設定項目です。
Flexbox
flexboxプロパティにベンダープレフィックスをつけるかどうか。IEなどの古いバージョンでは必要になるので、チェックはつけたままでいいでしょう。
Supports
@supportsの中に書いたプロパティにベンダープレフィックスをつけるかどうか。ここもチェックをつけたままでいいです。
@supportsは機能クエリと呼ばれるもので、CSSプロパティのブラウザサポート有無を確認できる機能です。プログラミング言語にあるif分のような条件分岐で、スタイルの切り替えができる機能です。
詳しく知りたい方はMDNなどに目を通しておきましょう。
Remove
使われていない古いベンダープレフィックスを除去するかどうか。チェックしたままで大丈夫です。
CSS Grids
gridプロパティにベンダープレフィックスをつけるかどうか。ここはデフォルトでチェックが入ってる「Enable Auto-Placement」のままでいいです。
Target Browsers
ベンダープレフィックスを付与する範囲について。デフォルトで記載されている内容は下の通りです。
> 2%,
last 2 versions,
Firefox ESR| ＞2% | 2%以上のシェアがあるブラウザ |
| last 2 versions | 最新2バージョンのブラウザ |
| Firefox ESR | 最新のFirefox ESR版 |
Can I Use のブラウザ・サポート情報が参考にされます。このままでもいいですが、シェア指定は1%でもいいかもしれません。
ツールのデザイン変更
右上設定ボタンの「App Setting」から、
Generalでツール全体のカラーを変更することもできます。
まとめ
PreprosでSassの開発環境を構築する方法をまとめました。
- Preprosにファイルをドラッグして登録
- CSSファイルのコンパイル先を設定
- オートプレフィックスにチェック
- オープンプレビューでブラウザに反映させながらコーディング
- 納品時にMinify化してCSSを圧縮
ざっくりこれくらいの理解ができていれば問題ないでしょう！
基本的なSassの使い方はこちらの記事でまとめていますので、これからSassを使ってみようとしている方は是非参考にしてみてください。
>> 【徹底解説】SCSSの書き方まとめ！基本を抑えてコーディング速度向上！
また、Sassのコンパイル環境はエディタのVScodeだけでも完結させることができますので、気になる方はこちらの記事をご覧ください。
>> VScodeプラグイン「DartJS Sass Compiler and Sass Watcher」でSassを使おう
