如何不将所有 CSS 与 SASS 和 bootstrap 合并到一个文件中

Question

我对 SASS 和 bootstrap 比较陌生。我将 bootstrap 与 SASS 结合使用，并在概念上遇到了一些困难。

我总是这样使用 CSS：一个基本 CSS-文件，具有基本布局（等式 base.css）。每个模板还包含一个不同的 CSS 文件（等式 sitemap.css、team.css、news.css）。此 CSS 文件仅包含相应模板的部分。所以我可以覆盖之前文件中的定义。

在SASS中，所有内容都编译在一个文件中。结合 bootstrap ，我实际上一直在为直到现在使用的概念而苦苦挣扎。

每次我想向现有定义添加一个新的 CSS 文件时，我都会收到错误消息，因为我必须重新包含完整的 bootstrap 结构。但是如果我重新包含它，整个 bootstrap 代码也会写入其他文件（eq. sitemap.css、team.css、news.css）。如果我在我的 HTML-tree 中包含这两个文件，bootstrap 定义（就像整个规范化块）被定义两次或更多次。

我有这个设置：

- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
  |-- base.css
  └-- team.css

在 base.scss 中，我包含了 bootstrap 内容。我确实还需要 team.scss 中的 bootstrap 内容，但不是所有主要内容，例如规范化内容。

我该如何实现？这是否可能，或者我是否必须通过将 css-class 添加到 body 标签（如 body.team）来切换我的 css 需求？但是我必须将每一页的全部 CSS 内容放在一个文件中。这不是螃蟹吗？

编辑把事情搞清楚一点：这是在 base.scss:

@import "settings/vars";
@import "vendors/bootstrap";
...
header {
    @extend .container;
    ...
    .contentbox {
        margin-top: $mainGap;
    }
    ...
}
...

这是在 team.scss:

header .contentbox {
    @extend .sr-only;
}

绝对清楚“@extend .sr-only；”由于缺少 bootstrap，因此在 team.scss 中不起作用。但是如果我包括 bootstrap 和

@import "vendors/bootstrap";

在 team.scss 的第一行中，我会自动将所有标准的 16kb bootstrap 内容也添加到 team.css 中。但是，这些定义已经在 base.css 中。所以我会有一个可以预防的开销。

我想我知道没有办法说："Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway."。但也许？

Answer 1

我在这种情况下所做的是用 Bootstrap 和所有基本代码以及我自定义的 _variables.scss 编译 base.scss。然后，如果我想添加 team.scss，我只需从 Bootstrap 导入我需要使用的混入和自定义变量。听起来不错！

但是...

因为 .sr-only 和其他只是作为 classes 而不是 SASS mixins 提供，你不能 @include 它，就像你可以用 .transition 例如 mixin。

因此，目前如果您使用 SASS，您有 2 个选择：

将 Bootstrap 模块 与您想要 extend/reuse

的 class 导入

//contain the .sr-only definition
@import "vendors/bootstrap/_scaffolding"; 
@import "vendors/bootstrap/_variables";

header .contentbox {
    @extend .sr-only;
}

Copy/Paste 来自 Bootstrap 源的 class 并扩展它：

@import "vendors/bootstrap/_variables";

// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

header .contentbox {
  @extend .sr-only;
}

Answer 2

您要搜索的内容在 Sass 中名为 partial 我猜：

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
@import "colors";
and _colors.scss would be imported.

仅供参考，在 LESS 中它将是 import option：@import (reference) "colors"

如何不将所有 CSS 与 SASS 和 bootstrap 合并到一个文件中

How NOT to combine all CSS into one file with SASS and bootstrap

css

sass

twitter-bootstrap