本文へスキップ ドキュメントナビゲーションへスキップ
GitHubで表示

Sass

ソースSassファイルを利用して、変数、マップ、mixin、関数を利用し、迅速な構築とプロジェクトのカスタマイズを実現しましょう。

このページの内容

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

ファイル構造

可能な限り、Bootstrapのコアファイルの変更は避けてください。Sassの場合、Bootstrapをインポートする独自のスタイルシートを作成して、それを変更および拡張することを意味します。npmなどのパッケージマネージャーを使用している場合は、次のようなファイル構造になります。

your-project/
├── scss/
│   └── custom.scss
└── node_modules/
│   └── bootstrap/
│       ├── js/
│       └── scss/
└── index.html

ソースファイルをダウンロードしていてパッケージマネージャーを使用していない場合は、同様の構造を手動で作成し、Bootstrapのソースファイルと独自のファイルを分けてください。

your-project/
├── scss/
│   └── custom.scss
├── bootstrap/
│   ├── js/
│   └── scss/
└── index.html

インポート

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 (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ファイルからの完全なインポートスタックを起点として使用することをお勧めします。

コンパイル

カスタムSassコードをブラウザでCSSとして使用するには、Sassコンパイラが必要です。SassはCLIパッケージとして提供されていますが、GulpやWebpackなどの他のビルドツール、またはGUIアプリケーションでもコンパイルできます。一部のIDEには、Sassコンパイラが組み込まれているか、ダウンロード可能な拡張機能として提供されています。

CLIを使用してSassをコンパイルしますが、お好みの方法を使用できます。コマンドラインから、以下を実行します。

# Install Sass globally
npm install -g sass

# Watch your custom Sass for changes and compile it to CSS
sass --watch ./scss/custom.scss ./css/custom.css

sass-lang.com/installとVS Codeでのコンパイルで、オプションの詳細をご覧ください。

**別のビルドツールでBootstrapを使用していますか？** Webpack、Parcel、またはViteでのコンパイルに関するガイドを参照してください。GitHubの例のリポジトリにも本番環境対応のデモがあります。

インクルード

CSSがコンパイルされたら、HTMLファイルに含めることができます。index.html内で、コンパイル済みのCSSファイルを含める必要があります。変更した場合は、コンパイル済みのCSSファイルへのパスを必ず更新してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom Bootstrap</title>
    <link href="/css/custom.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

変数のデフォルト値

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

Bootstrapの変数の完全なリストは、scss/_variables.scssにあります。一部の変数は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 & JSの例テンプレートリポジトリにアクセスして、独自のnpmプロジェクトでBootstrapを構築およびカスタマイズする方法を確認してください。Sassコンパイラ、Autoprefixer、Stylelint、PurgeCSS、Bootstrap Iconsが含まれています。

マップとループ

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を使用します。variables内の定義直後、mapsでの使用前に、$theme-colorsを要件の間に挿入する必要があることに注意してください。

// 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()関数は、明るさを固定量だけ変更するため、多くの場合、期待する効果が得られません。

shift-color()は、ウェイトが正の場合は色をシェーディングし、ウェイトが負の場合は色をティントすることで、これら2つの関数を組み合わせたものです。

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

.custom-element-3 {
  color: shift-color($success, 40%);
  background-color: shift-color($success, -60%);
}

色のコントラスト

ウェブコンテンツアクセシビリティガイドライン（WCAG）のコントラスト要件を満たすには、作成者は、ごく少数の例外を除き、最低4.5:1のテキスト色のコントラストと最低3:1の非テキスト色のコントラストを提供する必要があります。

これを支援するため、Bootstrapにはcolor-contrast関数を組み込みました。これはWCAGのコントラスト比アルゴリズムを使用して、sRGB色空間における相対輝度に基づいてコントラストの閾値を計算し、指定されたベースカラーに基づいて、明るい(#fff)、暗い(#212529)、または黒(#000)のコントラストカラーを自動的に返します。この関数は、複数のクラスを生成するミックスインやループで特に役立ちます。

例えば、$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のエスケープ

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

加算と減算関数

add関数とsubtract関数は、CSSのcalc関数をラップするために使用します。「単位なし」の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);
}

ミックスイン

scss/mixins/ディレクトリには、Bootstrapの一部を動かす多くのミックスインがあり、独自のプロジェクトでも使用できます。

カラースキーム

prefers-color-schemeメディアクエリ用の簡略化されたミックスインが用意されており、lightとdarkのカラースキームをサポートしています。カラーモードミックスインの詳細については、カラーモードのドキュメントを参照してください。

scss/mixins/_color-scheme.scss 
@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

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

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