TECHNOLOGY COMPARE

Bootstrap / Sass

「どっちが上?」ではなく、まず同じ仕事をする道具なのかを確認します。

DIRECT COMPARISON

直接比較しやすい組み合わせ

BootstrapとSassはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。

CSS設計・生成

Bootstrap

レイアウトとUI部品をまとめた成熟したCSS フレームワーク。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。

何を担当する?

グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。

いつ使う?

  • 管理画面や試作を共通部品で短期間に作るとき。

避けたい場面

  • 独自性の高い設計を最小の上書きで実現したいとき。
CSS設計・生成

Sass

変数や入れ子などをCSSへ加えるプリプロセッサ。Sass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。

何を担当する?

Sass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。

いつ使う?

  • 既存Sass資産を保守するか、ビルド時のCSS生成が必要なとき。

避けたい場面

  • 現代CSSだけで十分で、変換工程を増やしたくないとき。
DIRECT RELATION

BootstrapとSassはスタイルの再利用、局所化、実行時コストで比較される。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。一方、SassはSass記法を標準CSSへ変換し、大きなスタイルシートを分割管理する。