Q)「CSS プリプロセッサを導入するなら？」A)「PostCSS かな」 ~ PostCSS, Stylus, Sass, Less ザックリ比較した話
同僚のフロントエンドエンジニア氏に「今から CSS Preprocessor (プリプロセッサ) を導入するなら何がいいですかね？」と聞いたところ「PostCSS ですかね」という回答があったので、PostCSS, Stylus, Sass, Less をざっくり比較した話をご紹介します。
ちなみに、2017年6月某日のお話です。
PostCSS はざっくり説明すると JavaScript で CSS を変換するためのツールです。JavaScript の Babel みたいな立ち位置のツールです。
単体でできることは少ないですが欲しい機能はプラグインをインストールすれば使えるので、必要なプラグインだけ選定してインストールすることができる点が玄人好みなんだと思います。
後述する Sass や Stylus みたいにオールインワンな CSS プリプロセッサーではないので「とりあえず全部入りで生 CSS を書かなくて良くなるなら何かインストールしたい」って方は Sass か Stylus を使うといいんじゃないでしょうか。
あと、日本語でサンプルも Sass に比べるとかなり少ないのでその辺も導入時には確認しておくといいかもしれません。Qiita での PostCSS に関する投稿は64件でした。
PostCSS を使用している企業やサービスとして、Facebook, GitHub, Google等、日本では Qiita で導入しています。
とのことなので、導入実績はちゃんとあるので安心して使えそうです。
弊社で Stylus を使ってるので「Stylus はどうなんですか？」と聞いたところ、今から新しく導入するなら使わないという見解でした。
他にも、ネット上に日本語のサンプルコードが少ないので、フロントエンドに精通してないエンジニアが触ることを考えると、あまりオススメできないとのことでした。
確かに Qiita での Stylus に関する投稿は84件 でした。次に紹介する Sass に比べてかなり少ないですね。
フロントエンドに精通してるデザイナー or エンジニアが不在の場合は Sass を導入するのが良さそうという話になりました。
オールインワンでインターネット上に日本語の情報もたくさんあるので、何か困ったことがあっても自力でだいたい解決できそうな印象です。
Qiita での Sass に関する投稿は543件 でした。圧倒的な数ですね。
フロントエンドスキルが高まってくるか、リードフロントエンドエンジニアがジョインしたタイミングで PostCSS へ移行していくのでも遅くはないという見解です。
Sass や Stylus に比べて、できること少なくて採用する理由がほぼないという話でした。
「Less が得意な人がいれば導入してもいいんじゃない？」ぐらいな温度感です。
Qiita での Less に関する投稿は101件 でした。
これらの CSS Preprocessor プリプロセッサー以外は、この世に存在しないという前提で話をしました。
を導入すると良さそうというのが個人的な見解です。