我应该将我的 SASS 输出（多个文件）合并到一个文件中吗？如果是这样，怎么做？答案

【问题标题】：Should I combine my SASS output (multiple files) into a single file? If so, how?我应该将我的 SASS 输出（多个文件）合并到一个文件中吗？如果是这样，怎么做？
【发布时间】：2017-09-18 11:44:30
【问题描述】：

我曾经有一个 scss 文件，并将其转换为一个 css 文件并在我的 html 中使用。我现在想重新组织我的东西，并使用多个 scss 文件，拆分为 main.scss、buttons.scss 等。

但是，如果我是正确的，那么输出也将包含在多个 .css 文件中，即我不能告诉 SASS 将它们全部合并到一个文件中。

如何最好地将这些多个文件包含到我的 html 中？有没有办法将它们再次组合在一起并拥有一个 .css 文件，或者我应该根据需要将它们作为单独的文件加载到我的不同页面中？

如果最后使用单个文件更好，我想是这样，我可以告诉 SASS 将我的 .scss 文件合并到一个 .css 文件中，还是我会为此使用不同的工具?

【问题讨论】：

您可以通过@import 将文件包含在一个文件中，并以下划线开头命名导入（这样它们就不会变成CSS 文件）。如果您将所有内容合二为一，您将拥有一个大文件，但只有一个请求。如果你有多个文件，你有更小的文件，你可以将它们分成不同的视图/组件，但你当然有更多的要求。大小和请求/延迟之间的权衡。

标签： html css sass

【解决方案1】：

来自the docs：

Sass 构建在上面当前 CSS @import 但不需要 HTTP 请求， Sass 将获取您要导入的文件并将其与您要导入的文件，以便您可以将单个 CSS 文件提供给网络浏览器。
// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

【讨论】：

【解决方案2】：

查看名为“Partials”的文件。你可以这样命名你的文件

_buttons.scss
_lists.scss

然后创建一个 main.scss 文件（随意命名）。进入

@import buttons
@import lists

然后将您的 main.scss 文件转换为 css。您将拥有一个 css 文件。您可以在 SASS 网站上阅读此内容

http://sass-lang.com/guide

如果您使用 SMACSS 或其他方法，您将在每个目录中执行此操作。例如布局目录

Layout
_buttons.scss
_list.scss
_layout-dir.scss

在 layout-dir 文件中，您将导入布局目录中的所有文件然后在您的 main.scss 文件中，您将只导入每个目录文件

@import layout/layout-dir
@import basics/base-dir

等

您的变量和 mixins 文件也会导入到 main.scss 文件中，首先包含它们，这样所有东西都可以访问它们

https://www.youtube.com/watch?v=GI1BhlDtoUs

【讨论】：

语法是@import 'partial_name';
@Miscreant 这是语法，但我习惯使用 SMACSS。其中当然使用 4-5 个不同的目录。每个目录，比如布局目录，都有一个以 -dir 结尾的目录文件。我链接到的视频显示了这种用法