Emotion
柔軟なAPIを持つCSS-in-JS ライブラリ。オブジェクトまたはテンプレート記法から部品に紐づくスタイルを生成する。
何を担当する？
オブジェクトまたはテンプレート記法から部品に紐づくスタイルを生成する。
いつ使う？
- Reactでテーマや動的スタイルを細かく制御したいとき。
避けたい場面
- ランタイムのスタイル生成を避け、標準CSSを優先するとき。
Emotion / Sass
「どっちが上？」ではなく、まず同じ仕事をする道具なのかを確認します。
直接比較しやすい組み合わせ
EmotionとSassはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。
Sass
変数や入れ子などをCSSへ加えるプリプロセッサ。Sass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。
何を担当する？
Sass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。
いつ使う？
- 既存Sass資産を保守するか、ビルド時のCSS生成が必要なとき。
避けたい場面
- 現代CSSだけで十分で、変換工程を増やしたくないとき。
SassとEmotionはスタイルの再利用、局所化、実行時コストで比較される。Sass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。一方、Emotionはオブジェクトまたはテンプレート記法から部品に紐づくスタイルを生成する。