これから自分が学んだことをアウトプットするためこれから記事にしようと思います。
よろしくお願いいたします
【SASSの内容】
SASSとは？
css をより効率的に書けるようにした言語。webページがどんどん複雑になっていくとcssがカオスになっていくため、使いにくい
→コードの再利用、変数、条件分岐ができるようになったのがSASS。特にbootstrapをカスタマイズするときは便利なので使ってみることにした。
【準備①bootstrapのダウンロード】
以下の公式サイトからダウンロード
https://getbootstrap.jp/docs/4.5/getting-started/download/
今回はcomposerからダウンロードすることに
composer require twbs/bootstrap:4.5.0
自分の場合はdockerコンテナを利用してタウンロードしたので
docker-compose up exec app composer require twbs/bootstrap:4.5.0
すると以下vender/twbs以下にbootstrapのファイルがダウンロードされます
適用したいHTMLに「bootstrap.css」を読み込みます。（bootstrap.min.cssは圧縮されたファイルで本番環境にアップロードする際にはいいけどコードが見にくいので開発環境ではこちらを使用）
【準備② SASSのインストール〜試しにコンパイル】
・SASSのインストール
https://sass-lang.com/install（公式ドキュメント）
私はcomposerでダウンロードしたいので以下のサイトからダウンロード
https://github.com/scssphp/scssphp（GitHubから以下のサイトに飛びます）
https://scssphp.github.io/scssphp/
docker-compose exec app composer require scssphp/scssphp
一旦scssファイルを作成してそこにbootstrapのscssファイルをインポート
@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap.scss';
コンパイル先のcssファイル（app.css）を作成、先ほどcomposerでダウンロードしたコンパイラーを使ってapp.scssをコンパイル
（endor/scssphp/scssphp/bin/pscss < companies/stylesheets/scss/app.scssでapp.scssを読み込み、> companies/stylesheets/css/app.cssでファイルを出力している）
root:/var/www/html# vendor/scssphp/scssphp/bin/pscss < companies/stylesheets/scss/app.scss > companies/stylesheets/css/app.css
するとapp.cssファイルに以下のようにscssの記述をもとにcssが記述
あとは適当にscssファイルをカスタマイズ
コンパイルで生成したapp.cssをHTMLに読み込んでbootstrapのcssファイルを読み込ませた時と同じように反映されるか確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/var/html/companies/stylesheets/css/app.css">
<title>会社登録</title>
</head>
<body>
<h1>会社マスタ登録ページです</h1>
<form action="create.php" method="POST">
<?php if (count($errors)) : ?>
<ul>
<?php foreach ($errors as $error) : ?>
<li><?php echo $error; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div>
<label for="name">会社名</label>
<input type="text" id="name" placeholder="例：google" name="name" value="<?php echo $company['name'] ?>">
</div>
<div>
<label for="establishment_date">著者名</label>
<input type="date" id="establishment_date" name="establishment_date" value="<?php echo $company['establishment_date'] ?>">
</div>
<div>
<label for="founder">代表者</label>
<input type="text" name="founder" id="founder" value="<?php echo $company['founder'] ?>">
</div>
<div>
<input type="submit" value="登録">
</div>
</form>
</body>
</html>