Sass - Bootstrap框架

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

淡定的保温杯 · scss引入其他scss变量，并通过js动态 ...· 1 周前 ·

非常酷的柳树 · scss变量动态修改_如何动态改变scss中 ...· 1 周前 ·

朝气蓬勃的木瓜 · Sass/SCSS 变量 | Quasar ...· 1 周前 ·

深沉的黄瓜 · 全局scss变量 | Vue Naive ...· 1 周前 ·

爽快的手链 · Sass · Bootstrap文档网· 1 周前 ·

没人理的蚂蚁 · 中国新闻网· 2 月前 ·

仗义的冲锋衣 · Slots — Vue.js· 3 月前 ·

侠义非凡的椰子 · 不是鞋友都必须有一双「Air ...· 4 月前 ·

大方的地瓜 · 顺利通过！事关2、3号线延长线……|运营|南 ...· 6 月前 ·

笑点低的机器猫 · cv2 获取图片亮度值_pychram ...· 6 月前 ·

使用我们的源Sass文件来利用变量、映射、mixin等等。在我们的构建中，我们将Sass舍入精度提高到6（默认为5），以防止浏览器舍入出现问题。

尽可能避免修改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
@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变量和映射。您也可以根据需要在// Optional此部分下开始添加Bootstrap的各个部分。我们建议您使用文件中的完整导入堆栈 bootstrap.scss 作为起点。
可变默认值
Bootstrap中的每个Sass变量都包含 !default标志，使您可以在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，然后删除该!default 标志。如果已经分配了变量，则不会被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中的任何变量进行必要的重复，包括下面的全局选项。
映射和循环
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";
$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映射中存在一些特定的键。在自定义包含的映射时，可能会在使用特定Sass映射的键时遇到错误。
例如，我们将$theme-colors中的 primary、 success和 danger 键用于链接、按钮和表单状态。替换这些键的值应该不会出现问题，但是删除它们可能会导致Sass编译问题。在这些情况下，您需要修改使用这些值的Sass代码。
除了 Sass 映射 之外，主题颜色还可以用作独立变量，比如 $primary。
.custom-element {
  color: $gray-100;
  background-color: $dark;
使用Bootstrap的tint-color() 和 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));
实际上，您需要调用函数并传入color和weight参数。
.custom-element {
  color: tint-color($primary, 10%);
.custom-element-2 {
  color: shade-color($danger, 30%);
在至少对比度为1.5的情况下，只有极少数作者的对比度达到WCAG 2.0 标准。
我们在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`
Escape SVG
我们使用 escape-svg 函数来转义 背景图像的<, > 和 # 字符。使用 escape-svg函数时，必须引用数据 URIs 。
我们使用 add 和 subtract函数包装CSScalc 函数。这些函数的主要目的是避免将“无单位”0值传递到calc表达式时出现错误。 像 calc(10px - 0)这样的表达式在所有浏览器中都会返回一个错误，尽管在数学上是正确的。
Example where the calc is valid:
$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);