閱讀(1.8k) 書簽贊(0) 我要糾錯

Bootstrap5 Sass語法

2021-09-01 17:33 更新

使用Sass文件來利用變量、映射、mixin和函數(shù)來幫助你更快地構建和自定義你的項目。

使用源Sass文件來利用變量、映射、mixin等等。在Bootstrap的構建中，將Sass舍入精度提高到6（默認為5），以防止瀏覽器舍入出現(xiàn)問題。

結構目錄

盡可能避免修改Bootstrap的核心文件。對于Sass，你可以創(chuàng)建自己的樣式表，該樣式表將導入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

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

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

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

完成以上設置后，你可以開始在 ?custom.scss?中修改任何Sass變量和映射。你還可以根據(jù)需要在 ?// Optional?下添加bootstrap。我們建議使用 ?bootstrap.scss ?為你的起點。

變量默認值

Bootstrap中的每個Sass變量都包含 ?!default? 標志，你可以在不修改Bootstrap源碼的情況下重寫自己的Sass。根據(jù)需要復制和粘貼變量，修改它們的值，并刪除 ?!default?標志。如果一個變量已經(jīng)被分配，那么它不會被Bootstrap中的默認值重新賦值。

您可以在?scss/_variables.scss? 中找到Bootstrap變量的完整列表。某些變量設置為 ?null?，除非在配置中將其覆蓋，否則這些變量不會輸出屬性。

同一Sass文件中的變量覆蓋可以在默認變量之前或之后。但是，在跨Sass文件進行覆蓋時，必須先進行覆蓋，然后再導入Bootstrap的Sass文件。

這是通過npm導入和編譯Bootstrap時，更改 ?<body>?的 ?background-color? 和 ?color?的示例：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

如果有必要，可以對Bootstrap中的任何變量（包括下面的全局選項）進行必要的重復。

利用 npm 和我們提供的模板項目快速上手 Bootstrap！ 請前往 twbs/bootstrap-npm-starter 模板倉庫，以了解如何如何在你自己的 npm 項目中構建和定制 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 圖標庫。

Map和循環(huán)

Bootstrap包含一些Sass映射，這可以讓我們生成CSS會更加容易。我們將Sass映射用于顏色，網(wǎng)格斷點等。就像Sass變量一樣，所有Sass映射都包含 ?!default?標志，并且可以覆蓋和擴展。

默認情況下，一些Sass映射會合并為空映射。這樣做是為了給定的Sass map能輕松擴展，但這樣做的代價是使從 Map 中刪除項目變得更加困難。

修改 map

?$theme-colors? 映射中的所有變量都被定義為獨立的變量。要在 ?$theme-colors ?映射中修改現(xiàn)有的顏色，請在自定義Sass文件中添加以下內(nèi)容:

$primary: #0074d9;
$danger: #ff4136;

隨后，在Bootstrap的 ?$theme-colors?映射中設置這些變量:

$theme-colors: (
"primary": $primary,
"danger": $danger
);

添加 map

通過我們自己創(chuàng)建的新Sass map并將其與原map合并，將新顏色添加到? $theme-colors? 或任何其他map中。在這種情況下，我們將創(chuàng)建一個新的 ?$custom-colors map?并將其與 ?$theme-colors?合并。

// Create your own map
$custom-colors: (
"custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

從 map 中刪除

要從 ?$theme-colors ?或任何其他map中刪除顏色，請使用 ?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";
...

所需的值

Bootstrap假定在使用和擴展這些特定的值時，它們會在Sass映射中存在。自定義包含的map時，在使用特定Sass map的值時可能會遇到錯誤。

例如，我們將? $theme-colors? 中的 ?primary?、 ?success ?和 ?danger ?鍵用于鏈接、按鈕和表單狀態(tài)。替換這些鍵的值應該不會出現(xiàn)問題，但是刪除它們可能會導致Sass編譯問題。在這些情況下，你需要修改使用這些值的Sass代碼。

功能介紹

顏色

除了我們擁有的 Sass 映射之外，主題顏色也可以用作獨立變量，比如? $primary?。

.custom-element {
color: $gray-100;
background-color: $dark;
}

可以使用Bootstrap的 ?tint-color()? 和? shade-color()? 函數(shù)使顏色變亮或變暗。這些函數(shù)會將顏色與黑色或白色混合，而不像Sass的原生 ?lighten() ?和 ?darken() ?函數(shù)那樣，不過它們只有固定的亮度，而這種亮度通常達不到我們想要的效果。

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

實際上，你需要調(diào)用函數(shù)并傳入?color?和?weight?參數(shù)。

.custom-element {
color: tint-color($primary, 10%);
}

.custom-element-2 {
color: shade-color($danger, 30%);
}

色彩對比

為了滿足 WCAG 2.0彩色對比度的可訪問性標準，除了極少數(shù)例外，作者必須提供至少 4.5：1的對比度。

我們在Bootstrap中引用的另一個函數(shù)是 ?color-contrast ?函數(shù)，?color-contrast ?它利用 WCAG 2.0 算法根據(jù) sRGB 顏色空間中的相對亮度計算對比度閾值，根據(jù)指定的基色自動返回淺色 (#fff) 、深色 (#212529) 或黑色 (#000) 對比度顏色。此函數(shù)對于生成多個類的?mixin?或循環(huán)特別有用。

例如，要從我們的? $theme-colors map?生成顏色樣本:

@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 ?函數(shù)來轉義svg背景圖像的 ?<?, ?> ?和 ?# ?字符。使用 ?escape-svg ?函數(shù)時，必須引用數(shù)據(jù)URI。

函數(shù)計算

我們使用 ?add ?和 ?subtract ?函數(shù)包裝CSS ?calc ?函數(shù)。這些函數(shù)的主要目的是避免將無單位的 0 值傳遞到 ?calc ?表達式時出現(xiàn)錯誤。像? calc(10px - 0)? 這樣的表達式在所有瀏覽器中都會返回一個錯誤，盡管在數(shù)學上是正確的。

?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/?目錄中有大量的 ?mixin ?可以為 Bootstrap 的部分提供支持，也可以在您自己的項目中使用。

配色方案

一種媒體查詢的速記混合方案?prefers-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
  }
}

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充