Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
405
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

Bootstrap 4を使うならSassを使って3倍幸せになろう

More than 1 year has passed since last update.

Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。

Bootstrap 4のデザインのカスタマイズ方法

Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。

▲ Bootstrap 4を使って実装したタブとボタン

このコンテンツに、下記のデザイン更新を加えてみましょう。

  1. 全体の角丸をなくす
  2. 青い背景部分を赤い背景にする

デザイン更新には、Bootstrap 4のCSSを上書きする方法と、Sassを使う方法の2種類があります。

Bootstrap 4のCSSを上書きすると大変

Bootstrap 4のUIを構成するCSSであるbootstrap.cssのスタイルを、自前のCSSを使って上書きする方法です。角丸や青背景は複数の箇所で指定していますので、それぞれを上書きするには下記のコードが必要となります。全体のソースコードとデモの挙動はjsdo.itよりご確認ください。

自前のCSSでスタイルを上書き
/* 角丸の削除 */
.nav-tabs .nav-link,
.btn,
.btn-lg {
    border-radius: 0;
}

/* primary系のカラー調整 */
.bg-primary,
.btn-primary {
    background-color: #e87070 !important;
}
.btn-primary {
    border-color: #e87070;
}

▲ CSSのリデザインにより角丸が消え青背景が桃色背景に

編集したい全てのクラスを一つ一つ編集する必要があり、コンテンツが増えるほど、下記の問題が深刻化します。

  1. コンテンツが大きくなるほどコードが肥大化
  2. メンテンナンス性の低下
  3. 工数の増加

Bootstrap 4のデザインカスタマイズはSassを使うべき

この問題を解決するのが、Sassを使ったデザインカスタマイズです。Sassは人気のCSSプリプロセッサー言語(※)で、CSSコーディングの品質と効率を向上させることが可能です。通常のCSSコーディングに比べて下記のような利点があります。

  • ネスト(入れ子)が使用可能
  • 変数を使用可能
  • 条件分岐(if文)やループ処理(for文、while文等)が使用可能
  • ファイルを分割可能

※ 記事「これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー」参照

Bootstrap 4から採用されたSass

Bootstrap 3ではLESSやSass+Compassを使ってCSSを記述することができましたが、Bootstrap 4からはSassのみが採用されています。ソースファイルはBootstrap4公式サイトの「Source files」からダウンロードできます。Bootstrap 3のSass版と違い、Compassに依存しません。

ダウンロードしたファイルを展開すると、scssフォルダの中にSassファイルが格納されています。各コンポーネント毎、mixin毎にSassファイルが分かれています。

全体のスタイルを変数一つで変更可能

Sassファイルの中で重要なのが_variables.scssファイル。このファイルには、デザインを管理する様々な変数が定義されていて、この変数を編集するだけで全体的なデザインの更新が可能です。

Bootstrap 4のSassのコンパイルにはwebpackGulp を用います。それぞれの設定方法は次の記事を参照ください。

各Sassファイルをコンパイルし、css/bootstrap.css を作成するものとします。

_variables.scss編集の具体的な方法

では、前述の角丸無効化と青色背景変更を行いましょう。全体の角丸の有効・無効は、_variables.scssの$enable-roundedで切り替えることが可能です。角丸を無効にしたい場合はfalseを指定します。

角丸の無効化
$enable-rounded: false;

続いて、青色背景の変更を行います。デモで指定しているbg-primaryクラスbtn-primaryクラスといったprimary系クラスのカラーは、$brand-primary変数で管理されています

primary系クラスを桃色に変更
$brand-primary: #e87070 !default;

この設定をしてコンパイルし、そのCSSを読み込むことで、全体の角丸無効化と桃色背景の変更ができます。わざわざ個別のクラスを制御する必要はありません。全体のソースコードとデモの挙動はjsdo.itよりご確認ください。

▲ たった2行の編集で角丸が消え青背景が桃色背景に

Bootstrap 4を使うならSass一択

このように、Bootstrap 4ではSassを使うほうが更新箇所が最低限で済むので、CSSを使う場合に比べて3倍の幸せがあります

  1. コードの不要な肥大化を防ぐことができる
  2. メンテンナンス性が担保される
  3. 工数の減少に繋がる

Bootstrap 4を使うなら、Sassを使って幸せなコーディングをしましょう。

405
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
405
Help us understand the problem. What is going on with this article?