サス
ソース 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";
// 4. Include any optional Bootstrap components as you like
@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. 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
以下のグローバル オプションを含め、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";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@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 を使用できます。light
dark
@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
}
}