Sass

Sassソースファイルを利用して、変数、マップ、mixin、そして関数を活用しプロジェクトをカスタマイズしましょう。

項目

Sassソースファイルを利用して、変数、マップ、mixinなどの機能を利用できます。

ファイル構成

可能な限り、Bootstrapのコアファイルを変更しないでください。代わりに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を含む方法と、必要な部分のみを選ぶ方法があります。Bootstrapは後者を推奨しますが、コンポーネントの間にはいくつかの要求または依存関係を持つため、注意する必要があります。加えて、プラグインのためにいくつかの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 (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

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

// 8. Add additional custom code here

以上のセットアップをすることで、custom.scssの中で自由にSass変数やマップを編集することができます。必要であれば、// Optionalセクションの後にBootstrapのパーツを追加することも可能です。全てのインポートを行うbootstrap.scssから始めることをおすすめします。

変数のデフォルト

Bootstrapの全てのSass変数は!defaultフラグを持っており、Bootstrapのソースコードを編集すること無く初期値を変更することができます。必要な場合は、変数をコピー＆ペーストし、その値を編集して!defaultフラグを削除します。すでに変数に値が代入されている場合は、初期値による再代入は行われません。

scss/_variables.scssでは全てのBootstrapの変数が確認できます。いくつかの変数は値がnullとなっていますが、これらは設定を上書きしない限りプロパティとして出力されることはありません。

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

以下はnpm経由でインストールしたBootstrapのインポートとコンパイル時に<body>のbackground-colorとcolorを変更する例です:

// 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/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@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を始めましょう！SassとJavaScriptの例テンプレートリポジトリにアクセスして、あなた自身のnpmプロジェクトでBootstrapを構築しカスタマイズする方法を確認してください。Sassコンパイラ、Autoprefixer、Stylelint、PurgeCSS、Bootstrapアイコンが含まれています。

Mapとloop

BootstrapはSassマップ、すなわち関連するCSSを簡単に生成できるキーバリューペアを持っています。Sassマップはカラー、グリッドのブレークポイントなどで使われています。Sass変数と同じように、これらのSassマップは上書き及び拡張できるように!defaultフラグが付与されています。

いくつかのSassマップはデフォルトで空のマップにマージされています。これにより簡単にSassマップを拡張できますが、マップから要素を削除することは難しいです。

Mapの変更

$theme-colorsマップの全ての変数は個別の変数で定義されています。そのため$theme-colorsマップの変数を変更するには、カスタムSassファイルで次のようにします:

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

この結果、これらの変数はBootstrapの$theme-colorsマップに次のようにセットされます。

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

Mapに追加

$theme-colorsへ新しい色を追加するためには、新しいキーと値を与えます。この場合、Bootstrapは新しい$custom-colorsマップを用意し$theme-colorsにマージします。

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

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

Mapから削除

$theme-colorsやその他のマップから色を削除するには、map-removeを使用します。ただし、$theme-colorsは、variablesで定義した直後と、mapsで使用する前に、我々の要件の間に挿入しなければならないことに注意してください。:

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

必須キー

Bootstrapは使う、拡張するSassマップにいくつかの特定のキーが含まれることを仮定しています。マップをカスタマイズした場合、Sassマップのキーが既に使われているというエラーに遭遇するかもしれません。

例えば、$theme-colorsのprimary、success、dangerキーをリンク、ボタン、フォームの状態として使ったとします。これらのキーの値を入れ替えることは問題ありませんが、これらのキーを削除した場合はSassのコンパイルで問題が起こる可能性があります。この場合、それらの値を使うSassコードを変更する必要があります。

関数

カラー

Sassマップと同じく、テーマカラーは$primaryのように独立した変数として使うこともできます。

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

Bootstrapのtint-color()とshade-color()関数を使うことで、明るくしたり暗くしたりできます。これらの関数は白や黒と色を混ぜ合わせることで実現されており、Sassのlighten()やdarken()関数とは変化量が異なるため、予想と異なる結果になる可能性があります。

scss/_functions.scss

// 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のアルゴリズムを用いてコントラストの閾値を計算します。このアルゴリズムはsRBG色空間における相対輝度を基準に、自動的にlight (#fff)、dark (#212529) またはblack (#000) コントラストの色を返します。この関数は特に複数のクラスを生成するためのmixinやループで便利です。

これは$theme-colorsマップからカラースウォッチを生成する例です:

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

ループだけでなく、一回だけ利用することもできます:

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

色のマップ関数にベースの色を渡すこともできます:

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

SVGのエスケープ

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

加算・減算関数

Bootstrapでは、CSSのcalc関数のラッパーであるaddとsubstract関数が用意されています。これらは単位のない0値をcalc関数に渡した際に発生するエラーを防ぐためにあります。calc(10px - 0)は数学的には正しいですが、全てのブラウザでエラーとなります。

calcが有効な例:

$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);
}

calcが無効な例:

$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);
}

Mixins

scss/mixins/ディレクトリには、Bootstrapの一部をパワーアップするmixinがたくさんあり、プロジェクト全体で使用することもできます。

カラースキーム

prefers-color-schemeメディアクエリの省略記法mixinはlight、dark、カスタムカラースキームをサポートしています。カラーモードmixinに関する情報はカラーモードドキュメントを参照してください。

scss/mixins/_color-scheme.scss

@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
  }
}