パーシャル

Bootstrap Sassソースコードは多数の.scssファイルで構成されている(一覧はGitHubリポジトリを参照)。これらは用途により2種類に分類される。

• ライブラリターゲット(配布用プリコンパイル版)生成用
  • bootstrap.scss
  • bootstrap.grid.scss
  • bootstrap.reboot.scss
• パーシャル - その他全て
  • ファイル名がアンダースコアで始まる(例: _functions.scss)
  • モジュールファイルで、上記ターゲットや他のモジュールから参照される

パーシャルのインポートには@import文を用いる。パーシャルは伝統的にファイル名先頭にアンダースコアを用いるが、@import文ではこれを省略できる(書いてもよいが通常書かない)。

本ページはBootstrapの全機能のうちほんの一部しか利用していないので、使用パーシャルを調べてそれらだけインポートすればサイズを削減できる(ただし多少のコード解読と解析が必要)。以下の例(本ページのCSS用)を用いて全機能(150k)と比較して42kにまで削減できる(バージョン4.2.1の場合)。

// 必須パーシャルをインポート
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// 本ページに用いられている最小限のパーシャルだけ選んでインポート
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/utilities/background";
@import "bootstrap/scss/utilities/borders";
@import "bootstrap/scss/utilities/spacing";
@import "bootstrap/scss/utilities/text";