如何不使用 SASS 和引导程序将所有 CSS 合并到一个文件中答案

【问题标题】：How NOT to combine all CSS into one file with SASS and bootstrap如何不使用 SASS 和引导程序将所有 CSS 合并到一个文件中
【发布时间】：2015-09-16 03:38:55
【问题描述】：

我对 SASS 和 bootstrap 比较陌生。我将 bootstrap 与 SASS 一起使用，并在概念上有点挣扎。

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

在 SASS 中，所有内容都编译在一个文件中。与 bootstrap 结合使用时，我实际上对我使用的概念感到困惑。

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

我有这个设置：

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

在 base.scss 中，我包含了引导程序的内容。我还需要 team.scss 中的引导程序，但不是所有主要的东西，比如规范化的东西。

我如何做到这一点？这是否可能，或者我是否必须通过将 css 类添加到 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;”是绝对清楚的由于没有引导程序，因此在 team.scss 中不起作用。但是，如果我将引导程序包含在

@import "vendors/bootstrap";

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

我想我知道没有办法说：“嘿引导程序。我已经将你包含在 base.scss 中。所以你不必再次将自己的整个主要定义写入 team.scss。但我需要你是因为我喜欢你作为一个可用的框架。所以无论如何请给我提供函数和变量。”。但也许？

【问题讨论】：

如果 sass 将所有文件编译成一个文件，您只需将“引导”文件包含到 base.scss 中。然后它将可用于代码的所有其他部分。
您遇到的确切错误是什么？
正如@brewal 所说的
你真的想要 many CSS 作为输出吗？从性能的角度来看，1 个 CSS 更好（只有 1 个对服务器的请求，最近的浏览器仍然有大约 4+ 个并行下载字体、图像、js 等）。有一些例外，比如我正在开发的网站，其中下载了 3x25kB CSS，但 CSS 很大，下载的图片非常少
@FelipeAls 是的，我想要很多输出文件。文件名只是为了说明问题。在项目的结构中，有一些真正复杂的子页面需要它们自己的巨大 css 部分。那么，如果其他用户真的不需要它，为什么还要下载它。

标签： css twitter-bootstrap sass

【解决方案1】：

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

但是...

由于.sr-only 和其他只是作为类而不是SASS mixin 提供的，所以你不能@include 它，就像你可以使用.transition mixin 一样。

所以，目前如果您使用 SASS，您有两个选择：

导入 Bootstrap 模块与您要扩展/重用的类

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

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

从 Bootstrap 源中复制/粘贴类并扩展它：

@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;
}

【讨论】：

感谢汤姆的回答。问题不在于规范化。这只是为了说明问题。我在原始帖子的编辑中清除了一些内容。
哦，我明白了。因此，“理想的”引导程序应该将所有功能都封装在一个 mixin 中，并且只有在包含“provideBootstrap.scss”之类的内容时才应该编写所有 CSS。但是现在我学到了很多东西，因为我不知道只包含引导程序的一部分会起作用。

【解决方案2】：

我猜你正在搜索的东西在 Sass 中被命名为 partial：

如果您想要导入 SCSS 或 Sass 文件但不想编译为 CSS 文件，您可以在文件名的开头添加 下划线。这将告诉 Sass 不要将其编译为普通的 CSS 文件。然后，您可以在不使用下划线的情况下导入这些文件。

例如，您可能拥有_colors.scss。然后不会创建_colors.css 文件，你可以这样做
@import "colors";
和_colors.scss 将被导入。

仅供参考，在 LESS 中应该是 import option: @import (reference) "colors"

【讨论】：