twitter-bootstrap 如何使用 SASS 扩展/修改（自定义）Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45776055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extend/modify (customize) Bootstrap 4 with SASS
提问by Victor
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 accessto SASS variables that Bootstrap defines so I can override them.
我想创建一个基于 Bootstrap 的网站主题。我想扩展 Bootstrap 的默认组件并更改其中的一些。为此，我需要访问Bootstrap 定义的 SASS 变量，以便我可以覆盖它们。
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?
我虽然从 GitHub 克隆 Bootstrap 并直接更改它，但我听说这实际上不是一个好习惯。你能给我一些建议吗？
回答by Zim
Here's how to override / customize Bootstrap 4with SASS...
这是使用 SASS覆盖/自定义 Bootstrap 4 的方法...
Overrides and customizations should be kept in a separate custom.scssfile 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.
覆盖和自定义应保存在custom.scss与 Bootstrap SASS 源文件分开的单独文件中。这样，您所做的任何更改都不会影响 Bootstrap 源，这使得以后更改或升级 Bootstrap 变得更加容易。
1- Consider Bootstrap's SASS folder structure, alongside your custom.scss...
1- 考虑 Bootstrap 的 SASS 文件夹结构，以及您的custom.scss...
|-- \bootstrap
| |-- \scss
| | |-- \mixins
| | |-- \utilities
| | |-- bootstrap.scss
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
| custom.scss
2- In your custom.scss, import the Bootstrap filesthat 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 afterthe changes...
2- 在您的 中custom.scss，导入覆盖所需的 Bootstrap 文件。（通常，这仅仅是variables.scss在某些情况下，更复杂的cutomizations，你也可能需要functions，mixins和其他引导文件）。进行更改，然后@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 (optional) - Also, you can extend existing Bootstrap classesafterthe @import "bootstrap";to create new customclasses. For example, here is a new .row-darkclass that extends (inherits from) the Bootstrap .rowclass and then add a background-color.
2A（可选） -此外，还可以扩展现有的自举类之后的@import "bootstrap";创建新的自定义类。例如，这里有一个新.row-dark类，它扩展（继承自）Bootstrap.row类，然后添加背景颜色。
/* optionally create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}
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 variablesyou can override, see the variables.scssfile. There are also these global variables.
3- 编译 SASS（node-sass、gulp-sass、webpack/NPM 等）。CSS 输出将包含覆盖！如果 @imports 失败，请不要忘记检查 includePaths。有关可以覆盖的完整变量列表，请参阅variables.scss文件。还有这些全局变量。
Bootstrap SASS Demo on Codeply
In summary, here's how it works:
总之，这是它的工作原理：
1_ First, when the custom.scssfile is processed using SASS, the !default values are defined in the bootstrap/variables.scss.?
1_ 首先，当custom.scss使用 SASS 处理文件时，!default 值定义在bootstrap/variables.scss.?
2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss.?
2_接下来，我们的自定义值被设置，这将覆盖任何在bootstrap/variables.scss.?中设置了!default值的变量。
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.
3_ 最后，Bootstrap 被导入 ( @import "bootstrap")，它使 SASS 处理器（AKA 编译器）能够使用 Bootstrap 默认值和自定义覆盖生成所有适当的 CSS。
For those that don't know SASS, try this toolthat I made.
对于那些不了解 SASS 的人，请尝试我制作的这个工具。
Also see:
How to get 15 columns in Bootstrap 4 in SASS CSS?
Bootstrap v4 grid sizes / Sass List
Customizing Bootstrap CSS template
Extending Bootstrap 4 and SASS
另请参阅：
如何在 SASS CSS 的 Bootstrap 4 中获得 15 列？
Bootstrap v4 网格大小/Sass 列表
自定义 Bootstrap CSS 模板
扩展 Bootstrap 4 和 SASS
回答by Yilmaz
I will explain from scratch: Download Ruby because sass is written in Ruby. Open the “start command prompt with Ruby” and enter this:
我将从头开始解释：下载 Ruby 因为 sass 是用 Ruby 编写的。打开“使用 Ruby 启动命令提示符”并输入：
gem install sass
In macos, ruby is already installed. so in terminal:
在 macos 中，已经安装了 ruby。所以在终端：
sudo gem install sass
If you did install bootstrap through package manager; write this code into main.scss
如果您确实通过包管理器安装了引导程序；将此代码写入 main.scss
@import "../node_modules/bootstrap/scss/bootstrap";
then navigate to your work directory where you keep your main.scss or main.css files. Enter this code into command line:
然后导航到您保存 main.scss 或 main.css 文件的工作目录。将此代码输入命令行：
sass main.scss main.css
this will initialize compiling sass to css.
这会将编译 sass 初始化为 css。
If you did download bootstrap source files, find the “scss” folder in your source folder
如果您确实下载了引导源文件，请在源文件夹中找到“scss”文件夹
BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss
and copy it into your style folder in your project where u keep all styling files:css,scss,bootstrap then import “bootstrap.scss” file into main.scss
并将其复制到项目中的样式文件夹中，您将在其中保留所有样式文件：css、scss、bootstrap，然后将“bootstrap.scss”文件导入 main.scss
@import "./scss/bootstrap.scss";
And now initialize compiling by entering this code:
现在通过输入以下代码初始化编译：
sass main.scss main.css
Finally, you can type:
最后，您可以键入：
sass --watch main.scss:main.css //this should be running
to watch all changes in main.css DONT FORGET: You will write your css codes into main.scss, sass will compile it to main.css and you will LINK main.css file in your html.
查看 main.css 中的所有更改不要忘记：您将把 css 代码写入 main.scss，sass 会将其编译为 main.css 并且您将在 html 中链接 main.css 文件。
If you are using visual studio code, you can install “Live Sass Compiler” extension and down below you will see “Watch Sass” button. create main.scss file in the style folder and after import the files the way I explained above, click on the “watch Sass” button and it will start compiling.
如果你使用的是 Visual Studio 代码，你可以安装“Live Sass Compiler”扩展，在下方你会看到“Watch Sass”按钮。在 style 文件夹中创建 main.scss 文件，按照我上面解释的方式导入文件后，单击“watch Sass”按钮，它将开始编译。
Now in bootstrap folder, under scss folder there is _variables.scssfolder. this contains bootstrap variables. let's say you wanna change border-radius. in main.scssfile, before importing your bootstrap:
现在在 bootstrap 文件夹中，在 scss 文件夹下有_variables.scss文件夹。这包含引导程序变量。假设你想改变边界半径。在main.scss文件中，在导入引导程序之前：
$border-radius:10rem
@import "./scss/bootstrap.scss";
回答by Sazzad Hossain
Github version of Bootstrap always changes since the foundation itself is being updated constantly. Not to mention, the way Bootstrap is structured, it doesn't necessarily compile the way your SASS compiler will export. The best practice is to structure it the way best suitable for you.
Bootstrap 的 Github 版本总是在变化，因为基金会本身也在不断更新。更不用说，Bootstrap 的结构方式，它不一定编译您的 SASS 编译器将导出的方式。最佳做法是以最适合您的方式构建它。
Here's how I usually structure my entire project
这是我通常如何构建我的整个项目
/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/
This assumes you have sass and js minifier.
这假设您有 sass 和 js minifier。
