如何使用 SASS 扩展/修改（自定义）Bootstrap

Posted 2023-02-23

【中文标题】如何使用 SASS 扩展/修改（自定义）Bootstrap

【英文标题】：How to extend/modify (customize) Bootstrap with SASS

【发布时间】：2018-01-28 06:51:28

【问题描述】：

我想创建一个基于 Bootstrap 的网站主题。我想扩展 Bootstrap 的默认组件并更改其中的一些。为此，我需要 访问 Bootstrap 定义的 SASS 变量，以便我可以覆盖它们。

我想从 GitHub 克隆 Bootstrap 并直接更改它，但我听说这实际上不是一个好习惯。你能给我一些建议吗？

【参考方案1】：

2022 年更新（引导程序 5）

一般来说，自定义 Bootstrap 5 SASS 的工作方式与在 Bootstrap 4 中相同。但是，一些地图已更改（并且已添加新地图），因此您应该 follow the Bootstrap SASS documentation 了解如何添加的详细信息，删除或修改任何地图。

最近在这篇文章中的 cmets 表明自定义和导入的顺序仍然存在一些混淆。但是，这个概念并没有改变……

“变量覆盖必须在我们的函数被导入之后，但在其余的导入之前”

由于 SASS 变量默认值的工作方式，引导程序（“导入的其余部分”）应在任何变量自定义/更改之后导入。由于您的变量更改不会包含!default 标志，因此在最后导入引导程序时，您的更改不会被引导程序默认值覆盖。

The proof is in the pudding

---

以下是如何使用 SASS 覆盖/自定义 Bootstrap 4...

覆盖和自定义应保存在独立于 Bootstrap SASS 源文件的单独 custom.scss 文件中。这样一来，您所做的任何更改都不会影响 Bootstrap 源，这使得以后更改或升级 Bootstrap 变得更加容易。

1- 考虑 Bootstrap 的 SASS 文件夹结构，以及您的 custom.scss...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2- 在您的 custom.scss、import the Bootstrap files 中，这些是覆盖所需的。 （通常，这只是 variables.scss。在某些情况下，对于更复杂的自定义，您可能还需要 functions、mixins 和其他 Bootstrap 文件.)。进行更改，然后@import "bootstrap"。 在更改后导入 Bootstrap 很重要...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* make changes to the !default Bootstrap variables */    
$body-color: green;
        
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a (可选) - 此外，您可以扩展现有的 Bootstrap 类 在 @import "bootstrap"; 之后创建新的自定义 类。例如，这是一个新的 .row-dark 类，它扩展（继承自）Bootstrap .row 类，然后添加背景颜色。

 /* create new custom classes from existing classes */
 .row-dark 
    @extend .row;
    background-color: #333333;
    color: #ffffff;
  

3- 编译 SASS（node-sass、gulp-sass、webpack/NPM 等）。 CSS 输出将包含覆盖！如果您的 @imports 失败，请不要忘记检查 includePaths。有关您可以覆盖的完整变量列表，请参阅variables.scss 文件。还有这些global variables。

Bootstrap SASS Demo on Codeply

总而言之，它的工作原理如下：

1_ 首先，当使用 SASS 处理 custom.scss 文件时，!default 值在 bootstrap/variables.scss 中定义。

2_ 接下来，设置我们的自定义值，这将覆盖在bootstrap/variables.scss 中设置了 !default 值的任何变量。

3_ 最后，导入 Bootstrap (@import "bootstrap")，这使 SASS 处理器（A.K.A. 编译器）能够使用 Bootstrap 默认值和自定义覆盖生成所有适当的 CSS。

不了解 SASS 的可以试试我做的这个tool。

---

另见：How to get 15 columns in Bootstrap 4 in SASS CSS?Bootstrap v4 grid sizes / Sass ListCustomizing Bootstrap CSS templateExtending Bootstrap 4 and SASS

【讨论】：

这需要被接受为正确答案 - 谢谢！我一直在努力解决这个问题。

您如何避免在 html 中编写 BS 类？假设我只想要自定义类：例如，.title 可以用 SCSS 编写为 .title @extend .display-3; @extend .text-primary; 但 @extend 应该被诅咒 sitepoint.com/avoid-sass-extend 所以不确定这是否是个好主意？我不想在我的 HTML 中使用任何 Bootstrap 类。

如果我设置$body-color: green; 而不在它之前导入bootstrap/variables.scss 文件会发生什么。不行吗？

鉴于文件结构，不应该是：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/bootstrap"; 吗？

@Fritzip 不，这取决于。这些是相对路径，因此它们是相对于但引导程序包含/安装在您的 SASS 编译器中。

【参考方案2】：

我花了一点时间拼凑出一个足够的教程来安装和使用 sass 和 homebrew 来编辑 node/express 项目中的 bootstrap 4。

使用自制软件安装 sass

brew install sass/sass/sass

在您的项目中安装引导程序

npm install bootstrap --save

更改到 assets 目录，创建 sass 目录，创建应用和自定义文件

cd public/assets/css && mkdir sass && touch sass/app.scss sass/custom.scss

在 app.scss 中添加以下内容

// import bootstrap files
@import "../../../../node_modules/bootstrap/scss/functions";
// import bootstrap defaults
@import "../../../../node_modules/bootstrap/scss/variables";
// import customization
@import "custom.scss";
// finally, import Bootstrap to set the changes!
@import "../../../../node_modules/bootstrap/scss/bootstrap";

在 custom.scss 中添加示例自定义

$hotness: #fb3f7c;
$link-color: $hotness;

运行 sass；自动导出/更新 .css 文件

sass --watch sass/app.scss sass/bootstrap.css

链接到 html 中的新引导文件

参考文献

https://getbootstrap.com/docs/4.0/getting-started/theming/ https://sass-lang.com/install

【参考方案3】：

我将从头开始解释：下载 Ruby，因为 sass 是用 Ruby 编写的。打开“使用 Ruby 启动命令提示符”并输入：

gem install sass

在 macOS 中，已经安装了 ruby​​。所以在终端：

sudo gem install sass

如果您确实通过包管理器安装了引导程序；将此代码写入 main.scss

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

然后导航到保存 main.scss 或 main.css 文件的工作目录。在命令行中输入此代码：

sass main.scss main.css

这将初始化 sass 到 css 的编译。

如果您确实下载了引导源文件，请在源文件夹中找到“scss”文件夹

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

并将其复制到项目中的样式文件夹中，您可以在其中保存所有样式文件：css、scss、bootstrap，然后将“bootstrap.scss”文件导入 main.scss

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

现在通过输入以下代码来初始化编译：

sass main.scss main.css

最后，你可以输入：

sass --watch main.scss:main.css //this should be running

查看 main.css 中的所有更改不要忘记：您将 css 代码写入 main.scss，sass 会将其编译为 main.css，并且您将在 html 中链接 main.css 文件。

如果您使用的是 Visual Studio 代码，您可以安装“Live Sass Compiler”扩展，在下方您会看到“Watch Sass”按钮。在 style 文件夹中创建 main.scss 文件，按照我上面解释的方式导入文件后，点击“watch Sass”按钮，它将开始编译。

现在在 bootstrap 文件夹中，在 scss 文件夹下有 _variables.scss 文件夹。这包含引导变量。假设您想更改边界半径。在main.scss 文件中，在导入引导程序之前：

$border-radius:10rem
@import "./scss/bootstrap.scss";

【参考方案4】：

由于基础本身不断更新，Github 版本的 Bootstrap 总是在变化。更不用说，Bootstrap 的结构方式，它不一定编译您的 SASS 编译器将导出的方式。最佳实践是以最适合您的方式构建它。

这是我通常如何构建整个项目的方式

/style/
/style/theme.scss
/style/theme.min.css
/style/bootstrap.scss
/style/bootstrap.min.css
/style/bootstrap/subfiles
/style/bootstrap/mixins/subfiles
/style/bootstrap/utilities/subfiles

/scripts/
/scripts/bootstrap.min.js
/scripts/main.min.js
/scripts/bootstrap/

这假设你有 sass 和 js 缩小器。