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

时间:2017-08-19 20:35:53

标签: twitter-bootstrap sass bootstrap-4

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

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

4 个答案:

答案 0 :(得分:22)

以下是如何使用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.scssimport the Bootstrap files中。 (通常,这只是 variables.scss 。在某些情况下,通过更复杂的切割,您可能还需要functions,{{1}和其他Bootstrap文件。)。进行更改,然后mixins在更改后导入Bootstrap 非常重要...

@import "bootstrap"

2a(可选) - 此外,您可以在 /* 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"; 之后扩展现有的Bootstrap类 以创建新的自定义类。例如,这是一个新的@import "bootstrap";类,它扩展(继承自)Bootstrap .row-dark类,然后添加背景颜色。

.row

3-编译SASS(node-sass,gulp-sass,webpack / NPM等)。 CSS输出将包含覆盖!如果@imports失败,请不要忘记检查includePaths。有关您可以覆盖的完整变量列表,请参阅variables.scss文件。还有这些global variables

Bootstrap SASS Demo on Codeply

总之,以下是它的工作原理:

1_首先,当使用SASS处理 /* optionally create new custom classes from existing classes */ .row-dark { @extend .row; background-color: #333333; color: #ffffff; } 文件时,在custom.scss中定义了!默认值。

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

3_最后,导入Bootstrap(bootstrap/variables.scss),使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

答案 1 :(得分:1)

自从基础本身不断更新以来,Github版本的Bootstrap总是会发生变化。更不用说,Bootstrap的结构方式,它不一定编译你的SASS编译器将导出的方式。最佳实践是以最适合您的方式构建它。

以下是我通常构建整个项目的方式

/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/

这假设你有sass和js minifier。

答案 2 :(得分:1)

我将从头开始解释:下载Ruby,因为sass是用Ruby编写的。打开“使用Ruby启动命令提示符”,然后输入以下内容:

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”按钮,它将开始编译。

如果您想在React.js项目中使用Sass。请按照上述所有步骤操作,只需删除“ src”文件夹中的app.css文件

答案 3 :(得分:0)

我花了一些时间来整理一个适当的教程,以安装并使用带有自制软件的sass来编辑node / express项目中的bootstrap 4。

使用自制软件安装sass

brew install sass/sass/sass

在项目中安装引导程序

npm install bootstrap --save

更改为资产目录,创建sass目录,创建应用程序和自定义文件

cd public/assets/css && mkdir sass && touch sass/app.scss sass/custom.scss

在app.scss中添加以下内容

// import bootstrap files
@import "../../../../node_modules/bootstrap/scss/functions";
// import bootstrap defaults
@import "../../../../node_modules/bootstrap/scss/variables";
// import customization
@import "custom.scss";
// finally, import Bootstrap to set the changes!
@import "../../../../node_modules/bootstrap/scss/bootstrap";

在custom.scss中添加示例自定义

$hotness: #fb3f7c;
$link-color: $hotness;

放荡自动导出/更新.c​​ss文件

sass --watch sass/app.scss sass/bootstrap.css

链接到HTML中的新引导文件

参考