薩斯

利用我們的 Sass 源文件來利用變量、映射、mixin 和函數來幫助您更快地構建和自定義您的項目。

在本頁面

利用我們的 Sass 源文件來利用變量、映射、mixin 等。

文件結構

盡可能避免修改 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，或者選擇你需要的部分。我們鼓勵後者，但請注意我們的組件之間存在一些要求和依賴關係。您還需要為我們的插件添加一些 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";
@import "../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS 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";

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

// 6. Add additional custom code here

有了這個設置，你就可以開始修改你的custom.scss. 您也可以根據需要開始在該部分下添加部分 Bootstrap // Optional。我們建議使用我們bootstrap.scss文件中的完整導入堆棧作為您的起點。

變量默認值

Bootstrap 中的每個 Sass 變量都包含一個!default標誌，允許您在自己的 Sass 中覆蓋變量的默認值，而無需修改 Bootstrap 的源代碼。根據需要復制和粘貼變量，修改它們的值，然後刪除!default標誌。如果一個變量已經被賦值，那麼它不會被 Bootstrap 中的默認值重新賦值。

您將在中找到 Bootstrap 變量的完整列表scss/_variables.scss。一些變量設置為null，這些變量不會輸出屬性，除非它們在您的配置中被覆蓋。

變量覆蓋必須在我們的函數被導入之後，但在其餘的導入之前。

這是一個在通過 npm 導入和編譯 Bootstrap 時更改background-colorandcolor的示例：<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";
@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！前往 twbs/bootstrap-npm-starter模板存儲庫，了解如何在您自己的 npm 項目中構建和自定義 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 圖標。

地圖和循環

Bootstrap 包含一些 Sass 映射，鍵值對可以更輕鬆地生成相關 CSS 族。我們將 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";
@import "../node_modules/bootstrap/scss/root";

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

// Optional
@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);
  }
}

它也可用於一次性對比需求：

.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。

加減函數

我們使用addandsubtract函數來包裝 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/目錄有大量的 mixin，它們為 Bootstrap 的各個部分提供動力，也可以在您自己的項目中使用。

配色方案

媒體查詢的速記 mixinprefers-color-scheme支持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
  }
}