CSS vs Sass: どちらのスタイリング手法を選ぶか

素のCSSは今や変数・ネスト・レイヤーをネイティブに備えており、Sassはmixin・関数・より広範なコンパイル時の機能を追加するプリプロセッサです。

モダンなCSSは、かつてSass固有だった多くの機能を取り込みました。カスタムプロパティ、ネイティブなネスト、カスケードレイヤー、コンテナクエリなどで、多くの場合プリプロセッサの必要をなくします。Sassは依然として、ネイティブCSSにはないコンパイル時のmixin・関数・ループ・partial、そして成熟したモジュールツールを追加します。CSSはシンプルさとビルドステップ不要で優れ、Sassは高度なコンパイル時の抽象化と大規模なスタイルシートの整理で優れます。

ユースケースとツール

素のCSSは、スタイルにビルドを一切求めず、モダンなネイティブ機能に頼れるプロジェクトに向いています。Sassは、複雑なスタイルシートをDRYで整理された状態に保つためにmixin・関数・ループ・partialを求める大規模なコードベースに向いています。CSSがネストとレイヤーを採用するにつれ、その差は縮まっています。

ビルドとCI

Sassはコンパイルステップを追加し、素のCSSは追加しません。どちらもマネージドrunner上でビルドでき、より高速なrunnerはフロントエンドのビルドの一部としてSassのコンパイルを短縮します。

結論

モダンなネイティブ機能でシンプルかつビルド不要のスタイリングが欲しいなら: 素のCSS。コンパイル時のmixin・関数・大規模な整理が欲しいなら: Sass。ネイティブCSSの成長に伴い多くのチームがSassをやめていますが、大規模なレガシーや抽象化の多いスタイルシートは依然としてその恩恵を受けます。

関連ガイド