SassをコンパイルするためにPreprosを使ってみた

目次

※この記事は2019年に書かれたものです。

仕事では使用していなかったのですがひっそりとSassを勉強していました。

職場ではDreamweaverを使用していたので、Sassのコンパイルには困らなかったのですが、自宅で使用しているのはBracketsなのでどうしようか……実はコマンドプロントをよく知らないから手を出しにくい……。

と調べてみるとPreprosというGUIコンパイラを使用すると簡単とのことだったので試してみました。


Sassとは

Sass(サース、英: Syntactically Awesome Stylesheets)は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。
byウィキペディア

つまるところ、cssをもっと整理して書きやすくした素晴らしく解析されたスタイルシート。でいいのですかねいいことにしましょう。
ネスト機能で親セレクタを自動付与や参照、変数や演算が使用できるので書くスピードが上がる!と思います。
便利だ!と思いますがこのままではブラウザが理解してくれないのでcssにコンパイル(変換)してあげる必要があります。


Preprosでコンパイルしてみよう-DL編-

Preprosの公式ページ

Preprosの公式ページにアクセスします。

【Download FreeUnlimited Trial 】をクリックしてお使いのOSものをダウンロードします。その後インストールが始まりますので指示通りにぽちぽちしましょう。

ダウンロードページ


Preprosでコンパイルしてみよう-実際に使ってみる-

Prepros起動後、.scssをドラッグ&ドロップ、そして「Process File」をクリックするとコンパイルされます。簡単だぁ!

コンパイル完了

AutoCompileにチェックを入れておくと文字通り自動でコンパイルされます。エディタで.scssを変更→保存、即座にコンパイルしてcss生成なんてこともできます。
Autoprefixerにチェックを入れておくとCan I Useを参照してベンダープレフィックスを追加してくれます。親切すぎる。

実際に使ってみた様子です。

これが

これが

コンパイルされてこうなります。

こうなる


Preprosのお値段

1ライセンス29ドル(3200円ほど)ですが、無料でダウンロードできるトライアル版をポップアップは出るものの製品版と同じ性能で使い続けることができます。

真っ黒画面のコマンドプロントがよくわからず、自宅環境でのSass作業を諦めていましたがお手軽に導入・使用ができるPreprosを知り実際に使ってみました。
実際とても使いやすいです!