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サーバーからページを取得する際、パソコン内にそのページのコピーを取っておく。（キャッシュ）
次にこのページを見たいとき、そのキャッシュを利用して表示する。（サーバーから持ってくる手間はぶける）
それをキャッシュを消してもう一度もってこさすのがスーパーリロード。