UWEB

本文まで飛ばす

いろいろな方法でSCSSをコンパイルしたけど、やっぱり「Prepros」じゃないとダメだった

ツール

こんにちは。CSS大好き、やまぐち なな(@nana_winter_web)です。

CSSは大好きですが、そのままだと書くのが面倒なので、普段はプリプロセッサである、SCSSを使用しています。

SCSSをいろいろな方法でコンパイルしてきましたが、Preprosじゃないとだめだったので、今までに使ったSCSSのコンパイル方法とPreprosのおすすめポイントを紹介します。

今までに使ったコンパイル方法

SCSSのコンパイル方法はいろいろありますが、わたしが使ったのは下記の4つです。

  • GUIコンパイラ「koala
  • Visual Stadio Codeの拡張機能「Easy Sass」、「Live
    Sass
  • GUIコンパイラ「Prepros
  • タスクランナー「gulp」を使用してコンパイル

使用した順番は、だいたいリストの通りですが、gulpを使ってからやっぱりPreprosがいいなと思って戻ってきました。

Windowsで使えるコンパイル方法はほぼ網羅したかなと思います。コマンドプロンプトを使ってコンパイルするのはめんどくさいと思ったのでやっていません。

それぞれのコンパイル方法の特徴

それぞれのコンパイル方法を簡単に紹介します。
ほんとに簡単にしか紹介しないので気になるものがあれば検索してみてください。

名前 特徴
koala ソフトをインストールして設定するだけ。
自動でプレフィックスを付けてくれる。
Easy Sass(拡張機能) 拡張機能を入れるだけなので、一番手っ取り早くコンパイルできる。
テキストエディタを起動するだけでコンパイルされる。
Live Sass(拡張機能) 拡張機能を入れるだけなので、一番手っ取り早くコンパイルできる。
Watch Sassボタンを押さないとコンパイルされない。
Prepros ソフトをインストールするして設定するだけ。自動でプレフィックスを付けてくれる。
パーシャルファイルを保存すると、親ファイルが自動でコンパイルされる。
gulp CUIでコンパイルするのに似ている。自動でプレフィックスを付けてくれる。
インストールからコンパイルまでが長い。

gulp以外はRubyNode.jsを入れなくても良いという共通の特徴があります。
それだけで、SCSSを導入するハードルがかなり下がるのではないかと思います。

Visual Stadio Codeの拡張機能のEasy SassLive
Sass
の違いはテキストエディタを立ち上げて保存するだけでコンパイルされるか、ボタンを押さないと保存してもコンパイルされないかだけです。

Visual Stadio Code以外のテキストエディタでも同様の拡張機能があるのでお気に入りのテキストエディタで探してみると良いかも。

パーシャルファイルとは

_(アンダーバー)から始まることが多い。
パーシャルファイル自体はコンパイルされず、パーシャルファイルをまとめている親ファイルのみコンパイルされる。
CSSファイルは1つなので、管理がしやすくなるのに読み込み速度は遅くならない優れもの。

Prepros」の素晴らしいところ

いろいろな方法を紹介して、この方法がよさそうだなとか思った人もいるかもしれませんが、今日の本題のPreprosじゃないとダメだった理由の紹介です。

  • パーシャルファイルを保存したら親ファイルがコンパイルされる
  • 生成されるファイルは「prepros-6.config」のみ
  • インターフェイスがわかりやすい

パーシャルファイルを保存したら親ファイルがコンパイルされる

これがないと、パーシャルファイルを保存したら、親ファイルを保存してようやくコンパイルという手間がかかってしまいます。

便利な機能ですが、わたしが調べた限り、この機能があるのは、Preprosgulpだけのようです。

上記の情報は間違いでした。
VS Codeの拡張機能であるLive Sassでも同様の機能がありました。
大変失礼いたしました。

gulpも便利ではあるのですが、導入に手間がかかるので、手軽なのはLive Sassもしくは、Preprosです。

生成されるファイルは「prepros-6.config」のみ

生成されるファイルが多いとフォルダ内がごちゃごちゃしてしまうし、必要なファイルをうっかり消してしまった時が怖いので、生成されるファイルが少ないのは利点です。
生成しないように設定すれば、フォルダ内に余計なファイルが一切なくなります。

インターフェイスがわかりやすい

Prepros自体は基本立ち上げているだけで操作することはほとんどありませんが、分かりにくいよりもわかりやすい方が良いですよね。


監視していないファイルは色が薄くなっていて、目にスラッシュが入ったようなアイコン、監視しているファイルはそれぞれの言語のアイコンになっているので違いがわかりやすいです。


わたしは黒いテーマを使用していますが、白っぽいテーマにすることもできます。

まとめ

SCSSファイルが1つなら、テキストエディタの拡張機能で十分ですし、GUIじゃなくてもいいのであれば、gulpもありだと思います。

SCSSを本格的に利用し始めたら、無料トライアルでも期間、機能は無制限の「Prepros」もおすすめです。
無料でも無制限に使えるのですが、あまりにも優秀なので購入しようか迷い中。

記事が気に入ったら
シェアしてね

このページのトップに戻る