Source

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

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

序章

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

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

サス

ソース Sass ファイルを利用して、変数、マップ、ミックスインなどを利用します。

ファイル構造

可能な限り、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 のデフォルト値によって再割り当てされることはありません。

同じ 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ます。

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

必要なキー

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-yiqYIQ 色空間を利用して、指定された基本色に基づいて明るい ( #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ます。

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

変数 説明
$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-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 印刷を最適化するためのスタイルを有効にします。

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 マップと変数を提供することを目指します。

テーマの色

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

主要な
セカンダリ
成功
危険
警告
情報
暗い

グレイズ

scss/_variables.scssプロジェクト全体で一貫したグレーの色合いを実現するための広範なグレー変数セットと Sass マップ。

100
200
300
400
500
600
700
800
900

_variables.scssに、カラー変数と 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);
}

メディア クエリでブレークポイント変数を使用することもできます。

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}