twitter-bootstrap – 如何使用SASS扩展/修改(自定义)Bootstrap 4

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

我虽然从GitHub克隆Bootstrap并直接更改它,但我听说这实际上不是很好的做法.你能给我一些建议吗？

解决方法

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

您可以在自己的custom.scss文件中保留任何覆盖和自定义,该文件与Bootstrap SASS源文件分开.这样,您所做的任何更改都不会影响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.在某些情况下,使用更复杂的cutomizations,您可能还需要函数,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(可选) – 此外,您可以在@import“bootstrap”之后扩展现有的Bootstrap类;创建新的自定义类.例如,这是一个新的.row-dark类,它扩展(继承自)Bootstrap .row类,然后添加背景颜色.

/* 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文件.还有这些global variables.

Bootstrap SASS Demo on Codeply

总之,这是它的工作原理：

1_首先,当使用SASS处理custom.scss文件时,！默认值在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 List
Customizing Bootstrap CSS template
Extending Bootstrap 4 and SASS