我应该将SASS输出(多个文件)组合到一个文件中吗?如果是这样，怎么样

Question

我曾经有一个scss文件，然后将其变成一个CSS文件，并在我的HTML中使用它。我现在想重新组织我的内容，并使用多个SCSS文件，分为main.scss，buttons.scss等。

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

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

如果最好在末尾使用一个文件，我想是我可以告诉Sass将.scss文件组合到一个.css文件中，或者我会使用其他工具吗？

Answer 1

查看称为" partials"的文件。您会命名您的文件

_buttons.scss
_lists.scss

然后创建一个main.scss文件(无论您想要什么命名(。输入

@import buttons
@import lists

然后将您的Main.scs文件转换为CSS。您将有一个CSS文件。您可以在Sass网站上阅读此信息

http://sass-lang.com/guide

如果您使用SMACSS或其他方法，则在每个目录中使用。例如一个布局目录

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

在"布局"文件中，您将在"布局目录"中导入所有文件然后在您的主scs文件中您只会导入每个目录文件

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

etc

您的变量和Mixins文件也将导入到Main.scs文件中，首先包括它们，以便所有内容都可以访问它们

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

Answer 2

来自文档：

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