Skip to main content Skip to docs navigation
View on GitHub

Sass

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

On this page

ソースSassファイルを活用して、変数、マップ、ミックスインなどを利用します。

最新バージョンのDart SassでソースSassファイルをコンパイルすると、Sassの非推奨警告が表示されます。これによってコンパイルやBootstrapの使用が妨げられることはありません。私たちは長期的な修正に取り組んでいますが、当面はこれらの非推奨通知を無視することができます。

ファイル構造

可能な限り、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ファイルをインポートします。2つのオプションがあります: 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. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets
@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を使用します。$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()関数とは異なり、黒または白と色を混合します。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%);
}

色のコントラスト

Webコンテンツアクセシビリティガイドライン(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のエスケープ

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

加算および減算関数

CSScalc関数をラップするためにaddおよびsubtract関数を使用します。これらの関数の主な目的は、「単位なし」の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
  }
}