如何使用 SASS 扩展/修改(自定义)Bootstrap [英] How to extend/modify (customize) Bootstrap with SASS
问题描述
我想创建一个基于 Bootstrap 的网站主题.我想扩展 Bootstrap 的默认组件并更改其中的一些.为此，我需要访问 Bootstrap 定义的 SASS 变量，以便我可以覆盖它们.
I want to create a website theme based on Bootstrap. I want to extend Bootstrap's default components and change some of them. For this, I would need access to SASS variables that Bootstrap defines so I can override them.
我虽然从 GitHub 克隆 Bootstrap 并直接更改它，但我听说这实际上不是一个好习惯.你能给我一些建议吗?
I though of cloning Bootstrap from GitHub and changing it directly, but I heard that's actually not good practice. Could you give me some advice please?
推荐答案
以下是如何使用 SASS 覆盖/自定义 Bootstrap 4...
覆盖和自定义应保存在单独的 custom.scss 文件中，该文件与 Bootstrap SASS 源文件分开.这样，您所做的任何更改都不会影响 Bootstrap 源代码，这使得以后更改或升级 Bootstrap 变得更加容易.
Overrides and customizations should be kept in a separate custom.scss file that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes changes or upgrading Bootstrap later much easier.
1- 考虑 Bootstrap 的 SASS 文件夹结构，以及您的 custom.scss...
1- Consider Bootstrap's SASS folder structure, alongside your custom.scss...
|-- ootstrap
| |-- scss
| | |-- mixins
| | |-- utilities
| | |-- bootstrap.scss
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
| custom.scss
2- 在您的 custom.scss 中，导入覆盖所需的 Bootstrap 文件.(通常，这只是 variables.scss.在某些情况下，对于更复杂的自定义，您可能还需要 functions、mixins 和其他 Bootstrap 文件.).进行更改，然后 @import bootstrap".在更改之后导入 Bootstrap 很重要...
2- In your custom.scss, import the Bootstrap files that are needed for the overrides. (Usually, this is just variables.scss. In some cases, with more complex cutomizations, you may also need the functions, mixins, and other Bootstrap files.). Make the changes, then @import "bootstrap". It's important to import Bootstrap after the changes...
/* 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 类，然后添加背景色.
2a (optional) - Also, you can extend existing Bootstrap classes after the @import "bootstrap"; to create new custom classes. For example, here is a new .row-dark class that extends (inherits from) the Bootstrap .row class and then add a background-color.
/* 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 文件.还有这些全局变量.
3- Compile the SASS (node-sass, gulp-sass, webpack/NPM, etc..). The CSS output will contain the overrides! Don't forget to check the includePaths if your @imports fail. For a full list of variables you can override, see the variables.scss file. There are also these global variables.
总而言之，它的工作原理如下:
1_ 首先，当使用 SASS 处理 custom.scss 文件时，!default 值在 bootstrap/variables.scss 中定义.
1_ First, when the custom.scss file is processed using SASS, the !default values are defined in the bootstrap/variables.scss.
2_ 接下来，设置我们的自定义值，这将覆盖在 bootstrap/variables.scss 中设置了 !default 值的任何变量.
2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss.
3_ 最后，导入 Bootstrap (@import "bootstrap")，这使 SASS 处理器(AKA 编译器)能够使用 Bootstrap 默认值和自定义覆盖生成所有适当的 CSS.
3_ Finally, Bootstrap is imported (@import "bootstrap") which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS using both the Bootstrap defaults and the custom overrides.
对于那些不了解 SASS 的人，试试我制作的这个工具.
For those that don't know SASS, try this tool that I made.
另见:
如何在 Bootstrap 4 中获取 15 列在 SASS CSS 中?
Bootstrap v4 网格大小/Sass 列表
自定义 Bootstrap CSS 模板
扩展 Bootstrap 4 和 SASS
这篇关于如何使用 SASS 扩展/修改(自定义)Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
