テーマのブートストラップ

Bootstrap 4 を新しい組み込みの Sass 変数でカスタマイズしてグローバルスタイル設定を行い、テーマやコンポーネントの変更を簡単にします。

序章

Bootstrap 3 では、テーマの設定は主に、LESS の変数のオーバーライド、カスタム CSS、およびdistファイルに含まれている個別のテーマスタイルシートによって行われていました。少し努力すれば、コアファイルに手を加えることなく、Bootstrap 3 の外観を完全に再設計することができます。Bootstrap 4 は、おなじみですが、わずかに異なるアプローチを提供します。

現在、テーマは Sass 変数、Sass マップ、カスタム CSS によって実現されています。専用のテーマスタイルシートはなくなりました。代わりに、組み込みのテーマを有効にしてグラデーションや影などを追加できます。

サス

ソース Sass ファイルを利用して、変数、マップ、ミックスインなどを利用します。このビルドでは、ブラウザの丸めの問題を防ぐために、Sass の丸め精度を 6 (デフォルトでは 5) に増やしました。

ファイル構造

可能な限り、Bootstrap のコアファイルを変更しないでください。Sass の場合、Bootstrap をインポートして変更および拡張できる独自のスタイルシートを作成することを意味します。npm のようなパッケージマネージャーを使用していると仮定すると、ファイル構造は次のようになります。

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ソースファイルをダウンロードし、パッケージマネージャーを使用していない場合は、その構造に似たものを手動でセットアップして、Bootstrap のソースファイルを自分のものとは別にしておく必要があります。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

輸入中

custom.scssで、Bootstrap のソース Sass ファイルをインポートします。Bootstrap をすべて含めるか、必要な部分を選択するかの 2 つのオプションがあります。後者をお勧めしますが、コンポーネント間にいくつかの要件と依存関係があることに注意してください。また、プラグイン用にいくつかの JavaScript を含める必要があります。

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

その設定が整ったら、custom.scss. // Optional必要に応じて、セクションの下に Bootstrap の一部を追加することもできます。bootstrap.scss開始点として、ファイルからの完全なインポートスタックを使用することをお勧めします。

変数のデフォルト

Bootstrap 4 のすべての Sass 変数には!defaultフラグが含まれており、Bootstrap のソースコードを変更することなく、独自の Sass で変数のデフォルト値をオーバーライドできます。必要に応じて変数をコピーして貼り付け、値を変更して、!defaultフラグを削除します。変数が既に割り当てられている場合、Bootstrap のデフォルト値によって再割り当てされることはありません。

Bootstrap の変数の完全なリストはにありますscss/_variables.scss。

同じ Sass ファイル内の変数オーバーライドは、デフォルト変数の前または後に配置できます。ただし、Sass ファイルをオーバーライドする場合は、Bootstrap の Sass ファイルをインポートする前にオーバーライドする必要があります。

npm 経由で Bootstrap をインポートしてコンパイルするときに、background-colorとを変更する例を次に示します。color<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

以下のグローバルオプションを含め、Bootstrap の任意の変数に対して必要に応じて繰り返します。

マップとループ

Bootstrap 4 には、関連する CSS のファミリを簡単に生成できるキーと値のペアである Sass マップがいくつか含まれています。色、グリッドブレークポイントなどに Sass マップを使用します。Sass 変数と同様に、すべての Sass マップには!defaultフラグが含まれており、オーバーライドおよび拡張できます。

一部の Sass マップは、デフォルトで空のマップにマージされます。これは、特定の Sass マップを簡単に拡張できるようにするために行われますが、マップからアイテムを削除するのが少し難しくなります。

地図を修正する

マップの既存の色を変更するには$theme-colors、カスタム Sass ファイルに次を追加します。

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

地図に追加

に新しい色を$theme-colors追加するには、新しいキーと値を追加します。

$theme-colors: (
  "custom-color": #900
);

マップから削除

$theme-colorsやその他のマップから色を削除するには、を使用しますmap-remove。要件とオプションの間に挿入する必要があることに注意してください。

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

必要なキー

Bootstrap は、Sass マップ内にいくつかの特定のキーが存在することを想定しており、これらを自分で使用および拡張しています。含まれているマップをカスタマイズすると、特定の Sass マップのキーが使用されている場所でエラーが発生する場合があります。

たとえば、リンク、ボタン、およびフォームの状態にはprimary、、success、およびdangerキーを使用します。$theme-colorsこれらのキーの値を置き換えても問題はありませんが、削除すると Sass コンパイルの問題が発生する可能性があります。このような場合、それらの値を使用する Sass コードを変更する必要があります。

機能

Bootstrap はいくつかの Sass 関数を利用しますが、一般的なテーマに適用できるのはサブセットのみです。カラーマップから値を取得するための 3 つの関数が含まれています。

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

これらを使用すると、v3 の色変数を使用する方法と同じように、Sass マップから 1 つの色を選択できます。

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

マップから特定のレベルの色を取得する別の関数もあり$theme-colorsます。負のレベル値は色を明るくし、高いレベルは暗くします。

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

実際には、関数を呼び出して 2 つのパラメーターを渡します。色の名前$theme-colors(プライマリまたは危険など) と数値レベルです。

.custom-element {
  color: theme-color-level(primary, -10);
}

将来的に追加の関数を追加するか、独自のカスタム Sass を追加して、追加の Sass マップのレベル関数を作成するか、より詳細にしたい場合は汎用関数を作成することもできます。

色のコントラスト

Bootstrap に含まれる 1 つの追加関数は、色のコントラスト関数ですcolor-yiq。YIQ 色空間を利用して、指定された基本色に基づいて明るい ( #fff) または暗い ( ) コントラストカラーを自動的に返します。#111この関数は、複数のクラスを生成しているミックスインまたはループに特に役立ちます。

たとえば、$theme-colorsマップから色見本を生成するには:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

1 回限りのコントラストのニーズにも使用できます。

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

カラーマップ関数を使用してベースカラーを指定することもできます。

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

サスオプション

組み込みのカスタム変数ファイルを使用して Bootstrap 4 をカスタマイズし、新しい$enable-*Sass 変数を使用してグローバル CSS 設定を簡単に切り替えます。変数の値をオーバーライドし、必要に応じて再コンパイルしnpm run testます。

scss/_variables.scssこれらの変数は、Bootstrap のファイルで主要なグローバルオプションを見つけてカスタマイズできます。

変数	値	説明
`$spacer`	`1rem`(デフォルト)、または任意の値 > 0	スペーサーユーティリティをプログラムで生成するためのデフォルトのスペーサー値を指定します。
`$enable-rounded`	`true`(デフォルト) または`false`	`border-radius`さまざまなコンポーネントで定義済みのスタイルを有効にします。
`$enable-shadows`	`true`または`false`(デフォルト)	`box-shadow`さまざまなコンポーネントで定義済みのスタイルを有効にします。
`$enable-gradients`	`true`または`false`(デフォルト)	`background-image`さまざまなコンポーネントのスタイルを介して事前定義されたグラデーションを有効にします。
`$enable-transitions`	`true`(デフォルト) または`false`	`transition`さまざまなコンポーネントで定義済みのを有効にします。
`$enable-prefers-reduced-motion-media-query`	`true`(デフォルト) または`false`	ユーザーのブラウザ/オペレーティングシステムの設定に基づいて、特定のアニメーション/トランジションを抑制する`prefers-reduced-motion`メディアクエリを有効にします。
`$enable-hover-media-query`	`true`または`false`(デフォルト)	非推奨
`$enable-grid-classes`	`true`(デフォルト) または`false`	グリッドシステムの CSS クラスの生成を有効にします (例: 、、`.container`など)。`.row.col-md-1`
`$enable-caret`	`true`(デフォルト) または`false`	で疑似要素キャレットを有効にし`.dropdown-toggle`ます。
`$enable-print-styles`	`true`(デフォルト) または`false`	印刷を最適化するためのスタイルを有効にします。
`$enable-validation-icons`	`true`(デフォルト) または`false`	`background-image`検証状態のテキスト入力および一部のカスタムフォーム内のアイコンを有効にします。

色

Bootstrap のさまざまなコンポーネントとユーティリティの多くは、Sass マップで定義された一連の色によって構築されています。このマップを Sass でループして、一連のルールセットをすばやく生成できます。

全ての色

Bootstrap 4 で利用可能なすべての色は、scss/_variables.scssファイル内の Sass 変数および Sass マップとして利用できます。これは、後続のマイナーリリースで拡張され、既に含まれているグレースケールパレットと同様に、追加の色合いが追加されます。

青い

インジゴ

紫の

ピンク

赤

オレンジ

黄色

緑

ティール

シアン

これらを Sass で使用する方法は次のとおりです。

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

colorおよびの設定には、カラーユーティリティクラスも使用できますbackground-color。

将来的には、以下のグレースケールカラーで行ったように、各色の色合いに Sass マップと変数を提供することを目指します。

テーマの色

すべての色のサブセットを使用して、配色を生成するための小さなカラーパレットを作成します。これは、Sass 変数および Bootstrapsscss/_variables.scssファイルの Sass マップとしても利用できます。

主要な

セカンダリ

成功

危険

警告

情報

光

暗い

グレイズ

scss/_variables.scssプロジェクト全体で一貫したグレーの色合いを実現するための広範なグレー変数セットと Sass マップ。これらは「クールグレー」であり、ニュートラルグレーではなく、微妙なブルートーンになる傾向があることに注意してください。

100

200

300

400

500

600

700

800

900

内scss/_variables.scssには、Bootstrap の色変数と Sass マップがあります。$colorsSass マップの例を次に示します。

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

マップ内の値を追加、削除、または変更して、他の多くのコンポーネントでの使用方法を更新します。残念ながら、現時点では、すべてのコンポーネントがこの Sass マップを利用しているわけではありません。今後のアップデートでは、これを改善するよう努めます。それまでは、${color}変数とこの Sass マップを利用する計画を立ててください。

コンポーネント

Bootstrap のコンポーネントとユーティリティの多くは@each、Sass マップを反復処理するループで構築されています。これは、コンポーネントのバリアントを生成$theme-colorsし、ブレークポイントごとにレスポンシブバリアントを作成する場合に特に役立ちます。これらの Sass マップをカスタマイズして再コンパイルすると、これらのループに反映された変更が自動的に表示されます。

修飾子

Bootstrap のコンポーネントの多くは、基本修飾子クラスのアプローチで構築されています。これは、スタイリングの大部分が基本クラス (例: .btn) に含まれているのに対して、スタイルのバリエーションは修飾子クラス (例: .btn-danger) に限定されていることを意味します。これらのモディファイアクラスは$theme-colorsマップから構築され、モディファイアクラスの数と名前をカスタマイズします。

コンポーネントとすべてのバックグラウンドユーティリティ$theme-colorsに対する修飾子を生成するためにマップをループする方法の 2 つの例を次に示します。.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

レスポンシブ

これらの Sass ループも、カラーマップに限定されません。コンポーネントやユーティリティのレスポンシブバリエーションを生成することもできます。たとえば、レスポンシブテキスト配置ユーティリティでは、 Sass マップの@eachループとメディアクエリインクルードが混在しています。$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

を変更する必要がある場合$grid-breakpoints、変更はそのマップを反復するすべてのループに適用されます。

CSS 変数

Bootstrap 4 には、コンパイルされた CSSに約 20 個のCSS カスタムプロパティ (変数)が含まれています。これらは、ブラウザーのインスペクター、コードサンドボックス、または一般的なプロトタイピングで作業するときに、テーマの色、ブレークポイント、プライマリフォントスタックなどの一般的に使用される値に簡単にアクセスできるようにします。

利用可能な変数

含める変数は次のとおりです (:rootは必須であることに注意してください)。それらは私たちの_root.scssファイルにあります。

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

例

CSS 変数は Sass の変数と同様の柔軟性を提供しますが、ブラウザーに提供する前にコンパイルする必要はありません。たとえば、ここではページのフォントとリンクのスタイルを CSS 変数でリセットしています。

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ブレークポイント変数

CSS 変数 (例: --breakpoint-md) には元々ブレークポイントが含まれていましたが、これらはメディアクエリではサポートされていませんが、メディアクエリのルールセット内で引き続き使用できます。これらのブレークポイント変数は、JavaScript で利用できるため、下位互換性のためにコンパイル済みの CSS に残ります。詳しくは仕様をご覧ください。

サポートされていない例を次に示します。

@media (min-width: var(--breakpoint-sm)) {
  ...
}

サポートされているものの例を次に示します。

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}