メインコンテンツへスキップ

Sassのカスタマイズ(Sass)

ソースSassファイルを利用して、変数、マップ、mixin、関数を活用して、プロジェクトをより迅速に構築とカスタマイズをする。

ソースSassファイルを利用して、変数、マップ、mixinなどを活用。

 

ファイル構造(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

 

インポート(Importing)v5.0.0設定変更

custom.scss で、BootstrapのソースSassファイルをインポートするには、Bootstrap全部を組み込むか、必要な部分を選択するかの2つのオプションがある。Bootstrapプロジェクトチームとしては後者を推奨するが、Bootstrapのコンポーネント全体にはいくつかの要件と依存関係があるので注意。また、プラグイン用にいくつかのJavaScriptを組み込む必要がある。

custom.scss// オプションA: Bootstrapを全部組み込む

// デフォルトの変数の上書きをここに組み込む(関数は使用不可)

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

// ここにカスタムコードを追加
custom.scss// オプションB: Bootstrapを部分的に組み込む

// 1. 最初に関数を組み込む(カラー、SVG、計算などが操作できるように)
@import "../node_modules/bootstrap/scss/functions";

// 2. デフォルトの変数の上書きを組み込む

// 3. 残りの必要なBootstrapスタイルシートを組み込む
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. 必要に応じて、オプションのBootstrapコンポーネントを組み込む
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. ここにカスタムコードを追加

セットアップが整ったら、custom.scss のSass変数とマップの変更を開始。必要に応じてBootstrapの一部の追加も可能。開始点として、bootstrap.scss ファイルの完全なインポートスタックを使用することを推奨。

【変更履歴】
  • 【v5.0.0-beta3】(4.6.1でバックポート予定)
    • オプションBの変数、mixinの設置場所:関数に続いてデフォルトの変数の上書きの前 ⇒ デフォルトの変数の上書きの後

 

変数のデフォルト値(Variable defaults)v5.0.0-beta3設定変更

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

Bootstrapの変数の完全なリストは scss/_variables.scss にある。一部の変数は null に設定されており、これらの変数は任意に上書きされない限りプロパティを出力しない。

変数の上書きは、関数、変数、mixinがインポートされた後、残りのインポートの前に行われる必要がある。

Bootstrapをnpm経由で読み込んでコンパイルするときに <body>background-colorcolor を変更するには、次のようにする(v5.0.0-beta3変更)

custom.scss// 必須
@import "../node_modules/bootstrap/scss/functions";

// デフォルトの変数の上書き
$body-bg: #000;
$body-color: #111;

// 必須
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Bootstrapとそのデフォルト変数

// オプションのBootstrapコンポーネント
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// など

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

【変更履歴】
  • 【v5.0.0-beta2】(v4.6.0でバックポート)
    • デフォルトの変数の上書きの設置場所:Bootstrapとそのデフォルト変数の前か後 ⇒ 関数、変数、mixinがインポートされた後、残りのインポートの前
  • 【v5.0.0-beta3】(4.6.1でバックポート予定)
    • 変数、mixinの設置場所:関数に続いてデフォルトの変数の上書きの前 ⇒ デフォルトの変数の上書きの後

 

マップとループ(Maps and loops)v5.0.0-alpha1設定変更

Bootstrap5には、関連するCSSのグループを簡単に生成可能にするキーと値のペアであるSassマップがいくつか組み込まれている。カラー、グリッドのブレークポイントなどにSassマップを使用。Sass変数と同様に、すべてのSassマップには !default フラグが含まれており、上書きや拡張が可能。

Bootstrap 5から、v4 にあったマップのマージを破棄した。この方法で不要な値の削除がより詳細に制御可能。

【変更履歴】
  • 【v5.0.0-alpha1】
    • $grays(グレースケール変数), $colors(カラー変数), $theme-colors(テーマカラー変数), $spacers(空白値変数), $embed-responsive-aspect-ratios(埋込動画のアスペクト比変数), $form-validation-states(フォームの検証状態変数)の各変数から map-merge を削除

マップを変更(Modify map)

$theme-colors マップ内のすべての変数は独立した変数として定義されている。Bootstrapの $theme-colors マップの既存のカラーを変更するには、任意のSassファイルに以下を追加:

Bootstrap5.xの設定例 緑背景が変更箇所
custom.scss$primary: #0074d9;
$danger: #ff4136;

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

custom.scss$theme-colors: (
	"primary": $primary,
	"danger": $danger,
	...
);
※Bootstrap4.xの設定例 赤背景が変更箇所
custom.scss$theme-colors: (
	"primary": #0074d9,
	"danger": #ff4136,
	...
);
【変更履歴】
  • 【v5.0.0-alpha1】
    • $theme-colors マップにカラーを設定する場合、一旦 ${color} 変数を設定して、$theme-colors マップに ${color} 変数を設定

マップに追加(Add to map)v5.0.0-alpha2設定変更

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

Bootstrap5.xの設定例 緑背景が変更箇所
custom.scss// 独自のマップを作成
$custom-colors: (
  "custom-color": #900
);

// マップをマージ
$theme-colors: map-merge($theme-colors, $custom-colors);
※Bootstrap4.xの設定例 赤背景が変更箇所
custom.scss$theme-colors: (
  "custom-color": #900
);
【設定】
  • $theme-colors マップにカラーを追加する場合、一旦カスタムカラーの変数($custom-colors)を設定して、$theme-colors マップの既存のカラー設定をマージ
【変更履歴】
  • 【v5.0.0-alpha2】
    • $theme-colors マップにカラーを追加する場合は、一旦カスタムカラーの変数を設定する必要あり

マップから削除(Remove from map)

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

custom.scss// 必須
@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");

// 任意
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// など

 

必須キー(Required keys)

Bootstrapでは、Sassマップ内に特定のキーが存在することを想定しており、これらを使用して拡張している。組み込み済のマップをカスタマイズすると、特定のSassマップのキーが使用されているときにエラーが発生することがある。

例えば、リンク、ボタン、フォームの状態には、$theme-colorsprimary, success, danger のキーを使用。これらのキーの値を置き換えても問題はないが、削除するとSassコンパイルの問題が発生する可能性がある。この場合、これらの値を使用するSassコードを変更する必要がある。

 

関数(Functions)

カラー(Colors)v5.0.0-beta1設定変更

Bootstrapが持つSassマップの次に、テーマの色を $primary のように単独の変数として使用可能。

Bootstrap5.xの設定例 緑背景が変更箇所
custom.scss.custom-element {
	color: $gray-100;
	background-color: $dark;
}
※Bootstrap4.xの設定例 赤背景が変更箇所
custom.scss.custom-element {
	color: gray("100");
	background-color: theme-color("dark");
}

Bootstrapの tint-color() 関数と shade-color() 関数を使用すれば、色に明暗をつけられる。これらの関数は、従来あったSassの lighten()darken() 関数とは異なり、色を黒か白と混合する。それらは明度を一定量変更するのだが、多くの場合、目的の効果が得られないため。

Bootstrap5.xの設定例
scss/_functions.scss 内 color-functions の設定// 色合い:色と白を混ぜる
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// 色にをシェードする:色と黒を混ぜる
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// 色をスケールする:
// 重みが正の場合は色をシェードし、そうでない場合は色を付ける。
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
※Bootstrap4.xの設定例
scss/_functions.scss 内 Request a theme color level の設定@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);
}

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

Bootstrap5.xの設定例 緑背景が変更箇所
custom.scss.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}
※Bootstrap4.xの設定例 赤背景が変更箇所
custom.scss.custom-element {
	color: theme-color-level(primary, -10);
}
【変更履歴】
  • 【v5.0.0-alpha1】
    • color(), theme-color(), gray() 関数を廃止(値が単独の変数としても利用可能なため)
    • theme-color()theme-color-level() 関数の設定では、直接 ${color} 変数を使用
  • 【v5.0.0-alpha3】
    • color-level(), lighten(), darken() の各関数と $level, $theme-color-interval の各変数などを廃止し、tint-color(), shade-color(), scale-color() の各関数と $weight 変数などを使用
  • 【v5.0.0-beta1】
    • Sass独自のカラースケーリング関数との衝突を避けるため、scale-color() 関数の名前を shift-color() に変更

カラーコントラスト(Color contrast)v5.0.0-alpha1設定変更

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

Bootstrapに追加する関数は、カラーコントラスト関数 color-contrast である。WCAG 2.0アルゴリズムを利用して、sRGB 色空間の相対輝度に基づいて限界明暗比を計算し、指定されたベースカラーに基づいてlight(#fff), dark(#212529), black(#000)のコントラストカラーを自動的に返す。この関数は、複数のクラスを生成するmixinやループで特に便利。

例えば、$theme-colors マップからカラースウォッチを生成するには:

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

また、1回限りのコントラストのニーズにも使用可能:

custom.scss.custom-element {
	color: color-contrast(#000); // `color: #fff` を返す
}

カラーマップ関数でベースカラーを指定することも可能:

Bootstrap5.xの設定例 緑背景が変更箇所
custom.scss.custom-element {
	color: color-contrast($dark); // `color: #fff` を返す
}
※Bootstrap4.xの設定例 赤背景が変更箇所
custom.scss.custom-element {
	color: color-yiq(theme-color("dark")); // `color: #fff` を返す
}
【変更履歴】
  • 【v5.0.0-alpha1】
    • 使用する関数:color-yiqcolor-contrast
    • テーマカラーを使用する場合:color-yiq(theme-color("{color}"))color-contrast(${color})

SVGからのエスケープ(Escape SVG)

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

AddとSubtract関数(Add and Subtract functions)

Bootstrapでは、CSSの calc 関数で包括させるために、add(加算)と subtract(減算)関数を使用。これらの関数の主な使用目的は、calc の式で「ユニットレス」の 0 値が指定された場合のエラーを回避するため。calc(10px - 0) のような式は数学的には正しいのだが、すべてのブラウザでエラーが返されてしまう。

calcが有効な例:

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

.element {
	// calc(.25rem - 1px) の出力は有効
	border-radius: calc($border-radius - $border-width);
}

.element {
	// 上記と同じ calc(.25rem - 1px) を出力
	border-radius: subtract($border-radius, $border-width);
}

calcが無効な例:

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

.element {
  // calc(.25rem - 0) の出力は無効
  border-radius: calc($border-radius - $border-width);
}

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

Mixins v5.0.0追加

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

配色(Color schemes)

明暗とカスタムの配色をサポートする prefers-color-scheme メディアクエリの省略形のmixinが使用可能。

デフォルトの設定
scss/mixins/_color-scheme.scss 内 mixin-color-scheme の設定@mixin color-scheme($name) {
	@media (prefers-color-scheme: #{$name}) {
		@content;
	}
}
設定例
custom.scss.custom-element {
	@include color-scheme(dark) {
		// ここにダークモードスタイルを挿入
	}
	@include color-scheme(custom-named-scheme) {
		// ここにカスタム配色スタイルを挿入
	}
}