【Bootstrap 4】Sassを使用する理由と始め方！～導入編～
今回はBootstrap4 + Sassの始め方について説明します。
Bootstrap 4については下記の記事をご覧ください。
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrapをそのまま使用すると、Bootstrapのデザインでホームページを作成することになります。そうするとBootstrap臭のするデザインになってしまいます。見る人にはわかる、「あ～Bootstrapそのまま使ってるな、このサイト・・・」感。そこでデザインを変更したくなるのですが、デザインを変更するには、CSSをそのまま上書きする方法とSassで変更する方法の2パターンが存在します。両方必要ですが、Bootstrapのデザイン部分はSassでやった方が断然楽ですよというお話です。
そもそもSassって？
SassとはCSSを一括で変更できる仕組みのことです。Sassの中に、sassとscssがあり、それぞれ記載方法が異なりますが今回は割愛します。Bootstrapではscssを採用しています。
CSS使用とSass使用の比較：例題画面の導入
今回は、Bootstrap 4のExampleからAlbumを使用して説明します。
このサイトに対して、以下を変更します。
- ボタンの背景をダークグリーンに変更
- ボタンの角のまるみを取る
https://getbootstrap.com/docs/4.3/examples/album/
サイトを右クリックでソースを表示すると下記の様なソースが出てくるのでコピーして下さい。index.htmlファイルを作成し、ソースを貼り付けましょう。
次に、Bootstrapのcssのパスを変更しましょう。
元「index.html」
<!-- Bootstrap core CSS --> <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
変更後「index.html」
<!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
ブラウザで表示すると綺麗に表示できていると思います。
CSSをそのまま上書きする方法
上書きする場合はcustom.cssファイルを作成して以下を記載しました。
「custom.css」
そして、index.htmlにcustom.cssを追加しました。
「index.html」
結果は以下の様になりました。上手く変更できましたね！
今回はこれだけなので簡単なのですが、他にもprimaryってありますよね。text-primary、bg-primary。。。。。
それはどの様になるかというと、ダークグリーンにはなりません。
試しに<body>の下にbg-primaryを入れてみてください。
「index.html」
<body>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
一番上に青色のバーが表示されましたね。つまりはprimaryという言葉でもそれぞれで色が違います。これでは統一感がないですよね。
そして、primaryを統一しようと思ったら全て調べて、全てに対してダークグリーンを設定しなければなりません。大変ですし、やっぱりワインレッドにしてくれと言われたらすべて修正しなければなりません。この方法はデザインの統一感がない・メンテナンスが大変ということが分かります。
Sassを利用する
※ Sassのインストール方法はこの後に載せておきます。
この様な問題を解決するためにSassを使用したデザインのカスタマイズです。SassではBootstrap側がscssファイルを提供しており変数が定義されているため、それを変更して使用します。ですが、変更後はコンパイルが必要です。１行でできます。
main.scssを新規に作成して、以下を入力します。
「main.scss」
$theme-colors: (
"primary": #138891,
);
$enable-rounded: false;
@import "node_modules/bootstrap/scss/bootstrap";
コンパイルをします。
「ターミナル（コマンドプロンプト）」
custom.cssとbootstrap.min.cssの宣言は削除して、以下を記載してください。
「index.html」
保存後、ブラウザで見るとこうなります。
primary句は全てダークグリーンに変更されていますね！この様に一括で変更できるので、変更対応工数が劇的に少ないです。
sassのインストール方法
gemコマンドが必要なので、Windows の方はRubyをインストールしてください。（macの方は不要です）
https://rubyinstaller.org/downloads/
左端の欄から太文字になっているURLをクリックするとインストーラがダウンロードできます。
npmも必要なので、node.jsもインストールしましょう。Windows、mac両方です。
推奨版をインストールしてください。
その後に、ターミナル（コマンドプロンプト）を開いて以下を実行すると、bootstrap一式とsassをインストールできます。
npm init
npm install bootstrap --save
gem install sass
ホームページの表示とcssのカスタマイズ用に、htmlファイルとscssファイルが必要です。今回のindex.htmlとmain.scssがそれにあたります。
まとめ
Sassを使用すれば
- デザインの統一性の担保
- コードの肥大化抑制
- メンテナンス性が強い
につながります！
Sassを利用して快適なプログラミングをやりましょう！
