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

Question

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

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

Answer 1

以下是如何使用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,导入覆盖所需的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(可选) -此外,还可以扩展现有的自举类 之后的@import "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文件.还有这些全局变量.

Codeply上的Bootstrap SASS演示

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

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

2_接下来,我们设置了自定义值,它将覆盖任何设置了!默认值的变量bootstrap/variables.scss. 

3_最后,Bootstrap是导入的(@import "bootstrap"),它使SASS处理器(AKA编译器)能够使用Bootstrap默认值和自定义覆盖生成所有适当的CSS.

对于那些不了解SASS的人,请试试我制作的这个工具.

另请参阅:
如何在SASS CSS中的Bootstrap 4中获得15列？
Bootstrap v4网格大小/ Sass列表
自定义Bootstrap CSS模板
扩展Bootstrap 4和SASS

Answer 2

我将从头开始解释：下载 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";