Sass
利用我們的源Sass文件使用變量、映射、mixin和函數來幫助您更快地構建和定制您的項目。
利用我們的源Sass文件來使用變量、映射、mixin等等。
文件結構
盡可能避免修改Bootstrap的核心文件。對于Sass，這意味著創建自己的樣式表來導入引導，以便修改和擴展它。假設你’如果你使用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";
// 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
在設置到位后，您可以開始修改您的Sass變量和映射custom.scss. 您還可以根據需要在//Optional節下開始添加引導的部分。我們建議使用我們的完整導入bootstrap.scss文件作為起點。
變量默認值
Bootstrap的每個Sass變數都包含!default標志，讓您可以在自己的Sass中覆蓋變數的預設值，而無需更動Bootstrap的原始代碼。復制需要的變量并粘貼，修改其數值，并刪除!default標志。若已經分配好了變數，則他將不會被Bootstrap的預設值再度分配。
您可以在scss/_variables.scss中找到Bootstrap變量的完整列表。有些變量設置為null，除非在配置中被覆蓋，否則這些變量不會輸出其屬性。
同一Sass文件中的變數可以在預設變數之前或之后覆蓋。但是，當覆蓋橫跨Sass文件時，您必須在導入Bootstrap的Sass文件之前進行覆蓋。
以下是一個透過npm導入和編譯Bootstrap時，更改<body>中的background-colorcolorr：
// 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";
// Bootstrap and its default variables
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Repeat as necessary for any variable in Bootstrap, including the global options below.
映射和循環
Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS.
We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the
!default flag and can be overridden and extended.
Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making removing items from a map slightly more difficult.
修改地圖
All variables in the $theme-colors map are defined as standalone variables. To modify an existing
color in our $theme-colors map, add the following to your custom Sass file:
$primary: #0074d9;
$danger: #ff4136;
Later on, theses variables are set in Bootstrap’s $theme-colors map:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
添加到地圖
Add new colors to $theme-colors, or any other map, by creating a new Sass map with your custom values
and merging it with the original map. In this case, we’ll create a new $custom-colors map and merge it
with $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
從地圖中刪除
To remove colors from $theme-colors, or any other map, use map-remove. Be aware you must
insert it between our requirements and options:
// 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 assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.
For example, we use the primary, success, and danger keys from
$theme-colors for links, buttons, and form states. Replacing the values of these keys should present no
issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code
that makes use of those values.
功能
顏色
Next to the Sass maps we have, theme colors can also be
used as standalone variables, like $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
You can lighten or darken colors with Bootstrap’s tint-color() and shade-color()
functions. These functions will mix colors with black or white, unlike Sass' native lighten() and
darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the
desired effect.
// 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));
}
In practice, you’d call the function and pass in the color and weight parameters.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
顏色對比度
In order to meet WCAG 2.0 accessibility standards for color contrast, authors must provide a contrast ratio of at least 4.5:1, with very few exceptions.
An additional function we include in Bootstrap is the color contrast function, color-contrast. It
utilizes the WCAG 2.0 algorithm for calculating
contrast thresholds based on relative luminance in a
sRGB colorspace to automatically return a light (#fff), dark (#212529) or
black (#000) contrast color based on the specified base color. This function is especially useful for
mixins or loops where you’re generating multiple classes.
For example, to generate color swatches from our $theme-colors map:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
It can also be used for one-off contrast needs:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
You can also specify a base color with our color map functions:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
轉義SVG
We use the escape-svg function to escape the <, > and #
characters for SVG background images. When using the escape-svg function, data URIs must be quoted.
加減函數
我們使用add和subtract函數包裝CSS calc函數。這些函數的主要目的是避免將“無單位”0值傳遞到計算表達式時出錯。像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);
}