Bootstrapにテーマを与える

File structure

可能であれば、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ファイルをインポートしたいでしょう。あなたは、2つの選択肢を持っています。Bootstrapの全てを組み込むか、必要な部分を選択します。私たちは、後者を推奨します。しかし、私たちのコンポーネントには、いくつかの要件と依存関係があることに注意してください。また、あなたは、私たちのプラグインのために、いくつかの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で、Sass変数と地図のいずれかを修正し始めることができます。あなたは、また、// Optional セクションの下で、Bootstrapの部品を追加し始めることができます。

Variable defaults

!defaultフラグが含まれているBootstrap 4のすべてのSass変数は、あなたが、Bootstrapのソース・コードを修正することなく、あなた独自のSassに、変数のデフォルト値を上書きできます。必要に応じて、変数をコピー＆ペーストし、それらの値を変更し、そして、!defaultフラグを削除します。変数が、既に、割り当てられている場合、続いて、それは、Bootstrapのデフォルト値で、再設定されません。

同じSassファイルで上書きされた変数は、デフォルトの変数の前後にやって来ることができます。しかしながら、Sassファイル全体を上書きするとき、あなたは、あなたのインポートするBootstrapのSassファイルが、やってくる前に、上書きする必要があります。

ここに、のための背景色と色を変更する例があります。npmを通して、Bootstrapをインポートして、コンパイルするとき、：

// Your variable overrides
// あなたの変数を上書きします
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
// Bootstrapとそのデフォルトの変数
@import "node_modules/bootstrap/scss/bootstrap";

以下のグローバルなオプションを含む、Bootstrap内の変数に対して、必要に応じて繰り返す

Bootstrap 4には、いくつかのSassマップが含まれています。簡単に、関連するCSSのファミリーを生成するために作成するキー値の対。私たちは、私たちの色、グリッド・ブレークポイントなどのために、Sassマップを使用します。Sass変数のように、すべてのSassマップは、!defaultフラグが含まれています。そして、上書きし、拡張することができます。

例えば、私たちの$theme-colorsaマップに既存の色を修正するために、あなたのカスタムSassファイルに、以下を追加します。：

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

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

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

Functions

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-colorsaマップからの特定の水準の色を取得するための他の関数を持っています。負のレベル値は、色を明るくします。負のレベル値は、色を明るくし、高い水準のとき、暗くなります。

@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（例えば、primaryやdanger）と数値で示した水準からの色の名前。

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

その他の機能は、将来、追加することができます。あるいは、更なるSassマップのために水準関数を作成するためのあなた独自のカスタムSass、あるいは、あなたが、もっと冗長なことを望む場合、一般的なものでさえ、

Color contrast

Bootstrapに、私たちが組み込む1つの追加する機能は、色のコントラスト関数、color-yiqです。それは、指定された基準となる色に基づいて、light (#fff) やdark (#111)の色のコントラストを自動的に返すために、YIQ色空間を利用します。この関数は、あなたが、複数のクラスを作成している、mixinsやループのために、特に役に立ちます。

例えば、私たちの$theme-colorsaマップからカラー見本を作成します。：

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

また、それは、必要に応じて、一回限りのコントラストで使用されます。:

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

また、あなたは、私たちのカラー・マップ関数で、基準となる色を指定することができます。：

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

All colors

すべてのBootstrap 4で利用可能な色は、Sass変数と私たちのscss/_variables.scssファイルのSassマップとして使用できます。これは、その後のマイナー・リリースで拡張され、既に含まれているグレースケールのパレットのような、さらなるシェードが追加されます。

ここに、Sassでこれらを使用する方法があります。：

// With variable
// 変数付き
.alpha { color: $purple; }

// From the Sass map with our `color()` function
// 私たちの`color()`関数付きのSassマップから
.beta { color: color("purple"); }

また、カラー・ユーティリティ・クラスは、色と背景色を設定するために利用できます。

将来、私たちは、私たちが下のグレースケールの色で行ったように、各色の陰影にSassマップと変数を提供することを目指します。

Theme colors

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

Grays

あなたのプロジェクト全体で、一貫した灰色の陰影のためのscss/_variables.scss内の広大な灰色の変数とSassマップ

_variables.scssの中で、あなたは、私たちのカラー変数とSassマップを見つけ出すでしょう。ここに、$colors Sassマップの例があります。：

$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マップを使用することを計画します。

Modifiers

Bootstrapのコンポーネントの多くは、base-modifierクラスの手法で構築されます。これは、スタイルのバリエーションが、修飾子クラス（例えば、.btn-danger）に限定されている間、大部分のスタイルが、基底クラス（例えば、.btn）に含まれていることを示しています。これらの修飾子クラスは、私たちの修飾子クラスの数値と名前をカスタマイズするために、$theme-colorsaマップから構築されています。

ここに、どのように、私たちが、.alertコンポーネント、そして、.bg-*背景ユーティリティに修飾子を作成するために、全ての$theme-colorsaマップのループを越えるかについての2つの例があります。

// 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
// `.bg-*`カラー・ユーティリティを作成します
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Responsive

これらのSassループは、カラー・マップのどちらでも、限定されていません。また、あなたは、あなたのコンポーネントやユーティリティのレスポンシブなバリエーションを生成することができます。例えば、私たちが、メディア問合わせを含む、$grid-breakpoints Sassマップのために、@eachループを混合する、私たちのレスポンシブ・テキストの位置合せユーティリティを、取得します。

@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-breakpointを修正する必要がある必要があります。あなたの変更は、その地図上で繰り返す、すべてのループに適用されます。