如何使用SASS扩展/修改(自定义)Bootstrap 4 [英] How to extend/modify (customize) Bootstrap 4 with SASS
问题描述
我想创建一个基于Bootstrap的网站主题.我想扩展Bootstrap的默认组件并更改其中一些.为此，我需要对Bootstrap定义的SASS变量进行 access 访问，以便我可以覆盖它们.
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 的方法.
覆盖和自定义项应保存在与Bootstrap SASS源文件分开的单独的custom.scss文件中.这样，您所做的任何更改都不会影响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-在您的custom.scss ...
1- Consider Bootstrap's SASS folder structure, alongside your custom.scss...
|-- \bootstrap
| |-- \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(可选)-另外，您可以在@import "bootstrap";之后扩展现有的Bootstrap类 来创建新的 custom 类.例如，这是一个新的.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.
/* optionally 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文件时，在bootstrap/variables.scss中定义！default值.
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处理器(也称为A.K.A.编译器)能够使用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
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扩展/修改(自定义)Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
