PHP（7.4）・Bootstrap（v4.5）・Scssphp(Sass)(v1.81) Windows 10 Home
Bootstrapとは
世界で最も人気なHTML、CSS、JavaScriptのフレームワーク
メリット：①CSSを一から書かなくてよい。
②レスポンシブデザインに対応している。
③統一感のあるデザインが簡単にできる。
今回はComposerを用いてインストールした。
するとVendorというフォルダが作成される。
CSSで使うには、Vendor/twbs/bootstrap/dist/cssのフォルダの中の
bootstrap.css：ローカル環境向き
bootstrap.min.css：本番環境向き
この二つのうちどちらかをHTMLに読み込む。
<link rel="stylesheet" href="ファイルのパスを指定">
BootstrapをSassでカスタマイズ
・Sassとは
CSSをより効率的に書けるようにした言語
Syntacically Awesome Stylesheetsの略である。
メリット：①ネスト（入れ子）ができる。
②変数が使える
③四則演算ができる。
SassとScssの二つをSassというが、一般的にはよく使われているScssのことを指す。
SassにBootstrapを読み込み、それをCSSにコンパイルして使うと効率的。
①ネスト（入れ子）ができる。
SASS↓ CSS↓ 左のCSSで装飾しているHTML↓
(参照:https://www.youtube.com/watch?v=_Dl1y2DXONQ&list=LL&index=1)
②関数に引数を取ってパーツごとに指定できる。
↓の場合だと色だけ変えてる。
(参照:https://www.youtube.com/watch?v=_Dl1y2DXONQ&list=LL&index=1)
③四則演算が使える。
(参照:https://www.youtube.com/watch?v=_Dl1y2DXONQ&list=LL&index=1)
・$mainColor:#a00（メインカラー）とかサブカラーとかをまとめてvariable.scssファイルにまとめ、それらを読み込んで使うと管理がしやすい。読み込むときは
@import "variavle.scss";
を使う。
カスタマイズ方法、使い方
https://scssphp.github.io/scssphp/
にしたがってrequireコマンドでSassをインストール。
流れとしては上述のとおり、SassにBootstrapを読み込み、それをCSSにコンパイルして使う。
stylesheetフォルダをつくり、その中にscssとcssのフォルダ、それぞれにapp.scss、app.cssを作る。
app.scssファイルにvendor/bootstrap/bootstrap.cssを読み込む。
@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap(.scss');
scssの拡張子は省略可能。
これでScssにBootstrapの読み込みが完了。
次はそれをコンパイルする。
上記の様にコンパイルのためのファイルが用意されている。これはCSSを返してくれる。
コマンドラインからコンパイル。app.scssをapp.cssにコンパイルしますという意味。
最後にCSSをHTMLに読み込む。
<link rel="stylesheet" href="stylesheets/css/app.css">
以上。
おまけ
スーパーリロードとは
Windows:Shift+F5
Mac:ctrl+Shift+R
キャッシュを使用しないで、もう一度画面を読み込みなおすこと。
パソコンがWebサーバーからページを取得する際、パソコン内にそのページのコピーを取っておく。（キャッシュ）
次にこのページを見たいとき、そのキャッシュを利用して表示する。（サーバーから持ってくる手間はぶける）
それをキャッシュを消してもう一度もってこさすのがスーパーリロード。