如何使用SASS和Bootstrap不将所有CSS合并为一个文件

Question

我对SASS和bootstrap比较新。我使用SASS与bootstrap并且在一个概念上遇到了一些困难。

以前，我通常这样使用CSS：一个基本的CSS文件（例如base.css）包含基本布局。每个模板还包括不同的CSS文件（例如sitemap.css、team.css、news.css）。这些CSS文件仅包含各自模板的部分内容。所以我可以覆盖之前文件中的定义。

在SASS中，所有内容都编译在一个文件中。结合bootstrap，我实际上遇到了我到目前为止使用的概念的困难。

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

我的设置如下：

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

在base.scss中，我包含了bootstrap的内容。我还需要team.scss中的bootstrap内容，但不需要所有主要的内容，如normalize等。

我该如何实现呢？这是否可能，还是我必须通过向body标签添加CSS类（如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中无法生效是因为缺少bootstrap。但是如果我使用以下代码引入bootstrap：

@import "vendors/bootstrap";

在team.scss的第一行，我会自动将所有标准的16kb bootstrap内容添加到team.css中。然而，这些定义已经在base.css中了。因此，会产生不必要的开销。

我知道没有办法说：“嘿，bootstrap。我已经在base.scss中包含了你。所以你不需要再把整个主要定义写入team.scss中了。但是我需要你，因为我喜欢你作为一个可用的框架。所以请提供给我函数和变量。” 但或许有其他解决方式？

- iteratus

---

如果Sass将所有文件编译成一个单一的文件，您只需要将“bootstrap”文件包含在“base.scss”中。然后它将对您代码的所有其他部分可用。 - Brewal

就像@brewal所说的那样。 - David Barker

你是否真的希望输出许多CSS？从性能角度考虑，只有1个CSS更好（只有1个请求发送到服务器，最新的浏览器仍然可以并行下载约4个以上的字体、图像、js等）。还有一些例外情况，比如我正在工作的网站需要下载3个25kB大小的CSS文件，但是CSS很大，需要下载的图像非常少。 - FelipeAls

我认为最好的方法是将所有你想要重复使用的函数、变量和类放在它们自己的文件中。对于类，将它们重命名为占位符类，这样除非你使用@extend，否则它们不会重复。例如，％container; - harrypujols

如果您有特定的页面需要特定的规则，那么拥有2个以上的CSS是有意义的 :) - FelipeAls

Answer 1

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

但是...

由于.sr-only等仅作为类而不是SASS混合提供，因此您无法像使用.transition mixin一样使用@include它。

因此，目前如果您正在使用SASS，则有两个选项：

1. Import the Bootstrap module with the class you want to extend/reuse

   //contain the .sr-only definition
   @import "vendors/bootstrap/_scaffolding"; 
   @import "vendors/bootstrap/_variables";
   
   header .contentbox {
       @extend .sr-only;
   }
   

2. Copy/Paste the class from the Bootstrap source and extend it:

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

- Tomas Ramirez Sarduy

---

谢谢你的回答，汤姆。问题不在于规范化。这只是为了说明问题。我在原帖中编辑了一些内容，澄清了一些事情。 - iteratus

哦，我明白了。所以“理想”的引导程序应该将所有功能封装在mixin中，并且只有在包括类似于“provideBootstrap.scss”这样的东西时才编写所有CSS。但是现在我学到了很多，因为我不知道仅包括bootstrap的某些部分也可以工作。 - iteratus

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 (reference) "colors"

- FelipeAls