Sass

SassのGUIコンパイラ Prepros 【インストール&使い方】

2017年4月12日

概要

PreprosはSassをCSSに変換するGUIコンパイラです(macOS/Windows/Linux対応)。
PreprosにはHTMLやCSSを更新するとブラウザが自動でリロードされたり、スマートフォンからも確認できるようにローカルサーバを内蔵していたりとかなり便利な機能が用意されています。

他のコンパイラと比較してインストール、設定が簡単なのもポイントです。

Preprosの主な機能・特徴
  • ウォッチ対象(HTMLやCSS)のファイルを更新するとブラウザが自動でリロードされる
  • SassやLessなど豊富な対応言語
  • HTML/CSS/JSの圧縮
  • 画像最適化
  • ローカルサーバーを内蔵しており、スマホやタブレット端末なども同期して確認が出来る
  • FTP/SFTP転送も可能

料金

2017年4月6日現在は1ライセンスで29ドル(3,202円)です。
購入を促すポップアップが表示されますが、無料で使い続けることも可能です。

Prepropsのダウンロード&インストール

Downloadページにて、macOS、Windows、Linuxのうち当てはまるOSを選んでダウンロードします。

https://prepros.io/downloads

ダウンロードファイルはインストーラーになっているので、実行すれば簡単にインストールできます。
このとき、RubyやGemなど必要なツール類も一緒にインストールされます。

Bourbon/Neat/Susyのサポート

PreprosはBourbon、Neat、Susyをサポートしています。
特別な設定せずにプロジェクトにインポートすることができます。

@import "bourbon";
@import "susy";
@import "neat";

使ってみる

プロジェクトの登録

プロジェクトの登録は簡単で、登録したいフォルダをPreprosにドラッグ&ドロップするだけです。
アプリの左下にある + ボタンからでもプロジェクトを登録できます。

コンパイル

デフォルトの設定では自動でSCSSをCSSファイルに変換します。
手動でコンパイルしたい際は、Filesにリストされたファイルを選択し、[Process File]ボタンを押します。

Autoprefixer

PresposはデフォルトでAutoprefixerが有効になっており、Can I Use.のデータを元に、必要なCSSのみにベンダープレフィックスを追加します。 例えば下記のようにベンダープレフィックスが必要とされる指定を書いた場合、

元のSCSS
display: flex;

自動で下記のように出力されます。

出力結果
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

設定関連

左カラム

ハンバーガーメニュー

App Settings

Themesの[Dark]と[Light]でアプリケーションのカラーが選べます。

Project Defaults

ここで設定した設定は、新しいプロジェクトのデフォルトの設定になります。

Open Live Preview

ハンバーガーメニューの下にある地球アイコンをクリック(もしくは[Ctrl]+[L])すると、ブラウザが起動して現在のプロジェクトのプレビューが表示されます。
プロジェクト名の右端にあるアイコンをクリックすると、メニューが表示されます。そのメニューにある[Live Reload Browsers]と[Watch Files for Changes]をオンにすると、HTMLファイルやCSSファイルなどを保存する度に自動的にブラウザに反映されます。

General

Project Name

プロジェクト名を設定します。

Export Config

[Export Config]をオンにすると、prepros-6.config と言うファイルがプロジェクトのルートに生成されます。

Presposがこの prepros-6.config があれば、その設定を優先して使います。そのため、このファイルを別のプロジェクトにコピーして、設定をそのまま引き継ぐことなども可能です。
prepros-6.config を出力したくない場合は[Export Config]をオフにします。

Hide Unwatched Files

Preprosで管理しないファイルを非表示にします。

File Watcher

Enable File Watcher

ファイルが更新されたか監視します。

Watched Extensions

更新を監視するファイルを設定します。
不要なファイルがあれば×ボタンで監視リストから外します。

Ftp Settings

このパネルにFTP/SFTPの設定をすることにより、PresposがFTPクライアントとしての機能します。
[Upload]ボタンでアップロードしたり、[Upload On Change]をオンにすると、ウォッチ対象のファイルが更新されると自動で転送されます。

設定例
  1. [SFTP]をチェック
  2. [Remote Path]にドキュメントルートを設定
  3. 変更時に自動的にアップロードされるようにしたいので[Upload On Change]をオンにする
  4. [Host]にサーバのURL、もしくはIPを設定
  5. 公開鍵暗号方式で接続するので、[Use Private Key]をオンにする
  6. [Username]にアカウント名を設定
  7. [Private Key]に秘密鍵のテキスト情報を貼り付け

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!