サス

ソース Sass ファイルを利用して、変数、マップ、ミックスイン、および関数を利用して、プロジェクトのビルドとカスタマイズを高速化します。

このページでは

ソース 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 6. Add additional custom code here

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

変数のデフォルト

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

Bootstrap の変数の完全なリストはにありますscss/_variables.scss。一部の変数はに設定nullされています。これらの変数は、構成でオーバーライドされない限り、プロパティを出力しません。

変数のオーバーライドは、関数のインポート後、残りのインポートの前に行う必要があります。

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

スタータープロジェクトで npm 経由で Bootstrap を始めましょう! twbs /bootstrap-npm-starterテンプレートリポジトリに移動して、独自の npm プロジェクトで Bootstrap をビルドおよびカスタマイズする方法を確認してください。Sass コンパイラ、Autoprefixer、Stylelint、PurgeCSS、および Bootstrap アイコンが含まれています。

マップとループ

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

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

地図を修正する

マップ内のすべての変数は、$theme-colorsスタンドアロン変数として定義されます。マップの既存の色を変更するには$theme-colors、カスタム Sass ファイルに次を追加します。

$primary: #0074d9;
$danger: #ff4136;

後で、これらの変数は Bootstrap の$theme-colorsマップに設定されます。

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

地図に追加

$theme-colorsカスタム値を使用して新しい Sass マップを作成し、それを元のマップとマージすることで、やその他のマップに新しい色を追加します。この場合、新しい$custom-colorsマップを作成してとマージし$theme-colorsます。

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

マップから削除

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

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

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

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

必要なキー

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

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

機能

色

私たちが持っているSass マップの次に、テーマの色をのようにスタンドアロンの変数として使用することもできます$primary。

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()Bootstrap の関数と関数を使用して、色を明るくしたり暗くしたりできshade-color()ます。これらの関数は、色を黒または白と混ぜ合わせます。Sass のネイティブ関数lighten()やdarken()一定量だけ明度を変更する関数とは異なり、これは多くの場合、目的の効果につながりません。

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

実際には、関数を呼び出して、色と重みのパラメーターを渡します。

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

色のコントラスト

色のコントラストに関する WCAG 2.0 アクセシビリティ基準を満たすために、作成者は、ごくわずかな例外を除いて、少なくとも 4.5:1 のコントラスト比を提供する必要があります。

Bootstrap に含まれる追加関数は、色のコントラスト関数ですcolor-contrast。WCAG 2.0 アルゴリズムを利用して、色空間の相対輝度に基づいてコントラストのしきい値を計算し、指定された基本色に基づいて明るい ( )、暗い ( )、または黒 ( ) のコントラストカラーをsRGB自動的に返します。この関数は、複数のクラスを生成しているミックスインまたはループに特に役立ちます。#fff#212529#000

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

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

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

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

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

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

エスケープ SVG

関数を使用して、SVG 背景画像の,および文字escape-svgをエスケープします。関数を使用する場合、データ URI を引用符で囲む必要があります。<>#escape-svg

加算および減算関数

addおよび関数を使用してsubtract、CSScalc関数をラップします。これらの関数の主な目的は、「単位のない」0値が式に渡されたときのエラーを回避することcalcです。のような式calc(10px - 0)は、数学的に正しいにもかかわらず、すべてのブラウザーでエラーを返します。

計算が有効な例:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

計算が無効な例:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ミックスイン

私たちのscss/mixins/ディレクトリには、Bootstrap の一部を強化し、独自のプロジェクト全体で使用できる大量の mixin があります。

配色

、、およびカスタムカラースキームprefers-color-schemeをサポートする、メディアクエリの簡易 mixin を使用できます。lightdark

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}