Bootstrap5 Sass語法
使用Sass文件來利用變量、映射、mixin和函數(shù)來幫助你更快地構(gòu)建和自定義你的項(xiàng)目。
使用源Sass文件來利用變量、映射、mixin等等。在Bootstrap的構(gòu)建中，將Sass舍入精度提高到6（默認(rèn)為5），以防止瀏覽器舍入出現(xiàn)問題。
結(jié)構(gòu)目錄
盡可能避免修改Bootstrap的核心文件。 對(duì)于Sass，你可以創(chuàng)建自己的樣式表，該樣式表將導(dǎo)入Bootstrap，以便你可以對(duì)其進(jìn)行修改和擴(kuò)展。 如果你使用的是npm之類的包管理器，則文件結(jié)構(gòu)如下所示：
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
如果你沒有使用包管理器，則需要手動(dòng)設(shè)置類似于該結(jié)構(gòu)的文件，并將Bootstrap的源文件與你自己的文件分開。
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
導(dǎo)入
在你的? custom.scss?中，你將導(dǎo)入Bootstrap的源Sass文件。你有兩個(gè)選擇:導(dǎo)入所有Bootstrap，或者選擇您需要的部分。一般我們建議采用第二種方法，但要注意組件之間存在一些需求和依賴關(guān)系。你還需要為我們的插件包含一些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";
完成以上設(shè)置后，你可以開始在 ?custom.scss?中修改任何Sass變量和映射。你還可以根據(jù)需要在 ?// Optional?下添加bootstrap。我們建議使用 ?bootstrap.scss ?為你的起點(diǎn)。
變量默認(rèn)值
Bootstrap中的每個(gè)Sass變量都包含 ?!default? 標(biāo)志，你可以在不修改Bootstrap源碼的情況下重寫自己的Sass。根據(jù)需要復(fù)制和粘貼變量，修改它們的值，并刪除 ?!default?標(biāo)志。如果一個(gè)變量已經(jīng)被分配，那么它不會(huì)被Bootstrap中的默認(rèn)值重新賦值。
您可以在?scss/_variables.scss? 中找到Bootstrap變量的完整列表。 某些變量設(shè)置為 ?null?，除非在配置中將其覆蓋，否則這些變量不會(huì)輸出屬性。
同一Sass文件中的變量覆蓋可以在默認(rèn)變量之前或之后。 但是，在跨Sass文件進(jìn)行覆蓋時(shí)，必須先進(jìn)行覆蓋，然后再導(dǎo)入Bootstrap的Sass文件。
這是通過npm導(dǎo)入和編譯Bootstrap時(shí)，更改 ?<body>?的 ?background-color? 和 ?color?的示例：
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
如果有必要，可以對(duì)Bootstrap中的任何變量（包括下面的全局選項(xiàng)）進(jìn)行必要的重復(fù)。
利用 npm 和我們提供的模板項(xiàng)目快速上手 Bootstrap！ 請(qǐng)前往 twbs/bootstrap-npm-starter 模板倉庫，以了解如何如何在你自己的 npm 項(xiàng)目中構(gòu)建和定制 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 圖標(biāo)庫。
Map和循環(huán)
Bootstrap包含一些Sass映射，這可以讓我們生成CSS會(huì)更加容易。 我們將Sass映射用于顏色，網(wǎng)格斷點(diǎn)等。 就像Sass變量一樣，所有Sass映射都包含 ?!default?標(biāo)志，并且可以覆蓋和擴(kuò)展。
默認(rèn)情況下，一些Sass映射會(huì)合并為空映射。 這樣做是為了給定的Sass map能輕松擴(kuò)展，但這樣做的代價(jià)是使從 Map 中刪除項(xiàng)目變得更加困難。
修改 map
?$theme-colors? 映射中的所有變量都被定義為獨(dú)立的變量。要在 ?$theme-colors ?映射中修改現(xiàn)有的顏色，請(qǐng)?jiān)谧远xSass文件中添加以下內(nèi)容:
$primary: #0074d9;
$danger: #ff4136;
隨后，在Bootstrap的 ?$theme-colors?映射中設(shè)置這些變量:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
添加 map
通過我們自己創(chuàng)建的新Sass map并將其與原map合并，將新顏色添加到? $theme-colors? 或任何其他map中。 在這種情況下，我們將創(chuàng)建一個(gè)新的 ?$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中刪除顏色，請(qǐng)使用 ?map-remove?。 請(qǐng)注意，必須在以下選項(xiàng)之間插入它：
// 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假定在使用和擴(kuò)展這些特定的值時(shí)，它們會(huì)在Sass映射中存在。 自定義包含的map時(shí)，在使用特定Sass map的值時(shí)可能會(huì)遇到錯(cuò)誤。
例如，我們將? $theme-colors? 中的 ?primary?、 ?success ?和 ?danger ?鍵用于鏈接、按鈕和表單狀態(tài)。替換這些鍵的值應(yīng)該不會(huì)出現(xiàn)問題，但是刪除它們可能會(huì)導(dǎo)致Sass編譯問題。在這些情況下，你需要修改使用這些值的Sass代碼。
功能介紹
顏色
除了我們擁有的 Sass 映射之外，主題顏色也可以用作獨(dú)立變量，比如? $primary?。
.custom-element {
color: $gray-100;
background-color: $dark;
}
可以使用Bootstrap的 ?tint-color()? 和? shade-color()? 函數(shù)使顏色變亮或變暗。這些函數(shù)會(huì)將顏色與黑色或白色混合，而不像Sass的原生 ?lighten() ?和 ?darken() ?函數(shù)那樣，不過它們只有固定的亮度，而這種亮度通常達(dá)不到我們想要的效果。
// 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));
}實(shí)際上，你需要調(diào)用函數(shù)并傳入?color?和?weight?參數(shù)。
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
色彩對(duì)比
為了滿足 WCAG 2.0彩色對(duì)比度 的可訪問性標(biāo)準(zhǔn)，除了極少數(shù)例外，作者必須提供至少 4.5：1的對(duì)比度。
我們?cè)贐ootstrap中引用的另一個(gè)函數(shù)是 ?color-contrast ?函數(shù)，?color-contrast ?它利用 WCAG 2.0 算法根據(jù) sRGB 顏色空間中的 相對(duì)亮度 計(jì)算對(duì)比度閾值，根據(jù)指定的基色自動(dòng)返回淺色 (#fff) 、深色 (#212529) 或黑色 (#000) 對(duì)比度顏色。此函數(shù)對(duì)于生成多個(gè)類的?mixin?或循環(huán)特別有用。
例如，要從我們的? $theme-colors map?生成顏色樣本:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
也可以用于一次性對(duì)比需求：
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
你還可以使用我們的顏色圖功能指定基本顏色：
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
轉(zhuǎn)義 SVG
我們使用 ?escape-svg ?函數(shù)來轉(zhuǎn)義svg背景圖像的 ?<?, ?> ?和 ?# ?字符。使用 ?escape-svg ?函數(shù)時(shí)，必須引用數(shù)據(jù)URI。
函數(shù)計(jì)算
我們使用 ?add ?和 ?subtract ?函數(shù)包裝CSS ?calc ?函數(shù)。這些函數(shù)的主要目的是避免將無單位的 0 值傳遞到 ?calc ?表達(dá)式時(shí)出現(xiàn)錯(cuò)誤。像? calc(10px - 0)? 這樣的表達(dá)式在所有瀏覽器中都會(huì)返回一個(gè)錯(cuò)誤，盡管在數(shù)學(xué)上是正確的。
?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 的部分提供支持，也可以在您自己的項(xiàng)目中使用。
配色方案
一種媒體查詢的速記混合方案?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
}
}
更多建議：