オジサン、Preprosを使ってSassをズボラに書いてみる
オジサンはマークアップエンジニアとして日々CSSを書いている。
ここ数年はCSSはまずはSass(scss)で書いたものをCSSにコンパイルするのがほぼ常識と言って良いのである。
Sass(scss)をコンパイルするのにタスクランナーを使うのだが、基本コマンドラインで操作するので普段ターミナルを立ち上げない様な人々に取っては敷居が高く感じられる様である。オジサンの職場も例外でなく、ディレクターやデザイナーは難色を示すのである。
Visual Studio codeのプラグインにも適当なツールはあるのだが全員がVisual Studio codeを使っている訳では無いのでインストールを強要するのもいかがなものかと頭を悩ませていた。
そんな時に見つけたのがPreprosというアプリなのである。
Preprosは簡単に言えば、Sassのコンパイルをするのにフォルダをドラッグ&ドロップで登録するだけでお手軽にコンパイルを行える便利なアプリである。
残念ながら有料アプリではあるのだが、有料版の機能がフルに使用でき、かつ無期限の試用版が使えるのも中々便利である。定期的に有料版へのアップグレードを促す表示が出るのが少々面倒臭いが。。。
使い方は簡単である。
Prepros開発元のサイトよりインストーラーをダウンロードしてインストールするのみである。Mac版であればzipを解凍してアプリケーションフォルダに放り込むのみですぐに使えるようになる。
Sassをコンパイルする準備だが、Preprosを起動しコンパイルしたいSassファイルが格納されているフォルダをドラッグ&ドロップするのみである。
あとはPreprosが登録されたフォルダを監視し、Sassファイルが更新されるたびに自動でコンパイルを行ってくれる。
設定に関してはプロジェクトに応じて変更することも可能である。
また、PreprosはGulp同様、Autoprefixerも使うことが可能である。設定メニューよりAutoprefixerの項目より設定を行う。
デフォルトでは「not dead」「>2%」が設定されている。
さらにPreprosはSassのコンパイルだけでは無く、ローカルサーバー的な機能もある。
Visual studio codeのプラグイン「Live server」の機能が使えるのである。
他にもBrowser Sync的な機能もあったりする。
他にもBabelやPUGのコンパイルも使えるらしい。
gulp-sassの代替手段として使い始めたPreprosであるが思いのほか気に入ってしまい、課金しようか悩み中である（$29）。
Webプログラミング初学者の方は特にGulpの環境構築で悩んでいる暇でSassのコードをバリバリ書いて腕を磨いて欲しいものである。その方がよほど現場では役に立つ人材になること間違いなしである。
そんな感じで最近はPreprosでSassをズボラに書くことにハマり中なのであった。
反響があれば追加記事を書くつもりである。
