CSSプリプロセッサとは何か？より強力にCSSを書く

CSSプリプロセッサを使うと、変数・ネスト・関数といった追加機能を備えたスタイルシートを書き、それをプレーンなCSSにコンパイルできます。

プレーンなCSSは長年にわたって機能を増やしてきましたが、SassやLessのようなプリプロセッサはより早く登場し、今なお記述上の利便性を提供しています。プリプロセッサの言語で書くと、コンパイルステップがそれをブラウザが理解する標準的なCSSに変換します。このコンパイルステップはbuildで実行されるため、CIのpipelineの一部となります。

プリプロセッサが追加するもの

色・スペーシング・その他のトークンのための変数。
HTMLの構造を反映したネスト。
スタイルのロジックを再利用するためのミックスインと関数。
多数のファイルに分割したスタイルを1つにコンパイルすること。

コンパイルの仕組み

Dart Sassのようなコンパイラはソースファイルを読み込み、importを解決し、変数と関数を評価し、プレーンなCSSを出力します。ブラウザはコンパイル済みの出力しか見ることはなく、プリプロセッサの構文を見ることは決してありません。

プリプロセッサ vs PostCSS

プリプロセッサは処理の前に独自の言語をCSSに変換します。PostCSSはプラグインでCSSそのものを変換します。両者はライバルではなく、多くのプロジェクトはプリプロセッサを実行した後、autoprefixingとminificationのためにPostCSSを実行します。

ネイティブCSSは追いついたか？

現代のCSSにはcustom propertiesとネイティブのネストが備わり、プリプロセッサの必要性が減っています。多くの新しいプロジェクトは代わりにプレーンなCSSやユーティリティフレームワークを使いますが、大規模な既存コードベースは今なおSassに依存しています。

CI/CDにおけるプリプロセッサ

CSSのコンパイルはbuild中に実行され、ファイル数とimportの深さに応じてスケールします。コンパイル済みの出力をキャッシュし、変更されたファイルのみを再コンパイルすることで高速に保てます。コンパイル・minify・ハッシュ化されたCSSは、pipelineがデプロイするartifactの一部です。

重要なポイント

CSSプリプロセッサは変数・ネスト・関数を追加し、プレーンなCSSにコンパイルします。
プリプロセッサとPostCSSは競合ではなく、補完し合う関係です。
CSSのコンパイルはbuildで実行され、CIでの出力キャッシュの恩恵を受けます。