ベータ版ではあるが、bootstrap5がリリースされたのでSCSSの勉強がてら知識を深める。
Bootstrapと私
Bootstrapは何度か実務で使用したこともあるフレームワークで、3～4まで利用経験がある。
利用にあたっては、進化するデバイスやブラウザの要求する知識の習得に追いつけなくなってきたことや（コーディングにかける時間を他業務に振り分ける必要があった）、利用者が多くドキュメントが充実していること、数あるフレームワークの中でも習得が容易な点などが背景にあった。
冗長な部分が多くなるというのがデメリットになるが、コードのサイズは微々たるものであるし、そこまでシビアな環境でもないのでこれでいいのだ。
SCSS
BootstrapはSCSSでの編集が推奨されているが、社内で複数のスタッフで共同コーディングする必要があるためなかなかSCSSに切り替えるタイミングがなかった（各スタッフのSCSS習得が必要）。
しかし世の潮流や、より効率的な管理のために今回SCSSを導入することにした。これまで一通りのSass、SCSSの習得を進めてきたので、いざガチガチに組み上げられたフレームワークを読み解くことから始める。
BS5のSCSS
ダウンロードできるBootstrapの構造は下記の通りである。
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──content/
│ └── docs/
│ └── 5.0/
│ └── examples/
├── js/
└── scss/今回使用するのは、SCSSの部分。CSS部分を直接読み込む場合は
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map多。minとついているものはミニファイされたものなので、実際はここに並んでいる量が使用されるわけではない。リセット系CSSはreboot.css。他との違いはこのページが詳しい。
これを編集していくとなると、こっちを直してあっちを直してみたいにモグラ叩き的な展開は必至。上書き用のCSSに切り分けて対応する方法でこれまでやってきたが、時間も手間もすごいのでやめていく。
コアのSCSS
コンパイルするにあたって、以下の設定をVScodeのLive Sass Compilerに行う。
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
]
}format, expandedは可読性の高いコード。他にも圧縮させるモードなど色々選べる。あとはコンパイル後のファイルの保存先などを指定しておく。SCSSと混ざると判別しにくくなるので、別のディレクトリにしておいた方が良い。
詳細はこのページが詳しい。
で、肝心のBSのコアになるSCSSが以下の通り。
/*!
* Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
多。基本的に使いまわせるパーツごとにSCSSが分割されている。spinnersとか使わない機能はここでコメントアウトしてしまえば、除外できるので便利。
これをコンパイルすると、各ファイルを合体して11300行（expanded）のCSSにまとめ上げてくれる。試しにspinnersをコメントアウトしてコンパイルすると、11200行程度に短くなった。
基本的な編集はConfigurationとコメントのある4つのファイルを編集することで、変数やmixinを通してCSS全体に影響を及ぼすことができる。
ひとまずはここまで。
参考書籍（4はだいたい5と同じ）
