Question

我曾经有一个scss文件，并把它变成一个css文件并在我的html中使用它。我现在想重新组织我的东西，并使用多个scss文件，分成main.scss，buttons.scss等。

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

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

如果最好在最后使用单个文件（我认为是这样），我可以告诉SASS将我的.scss文件合并到一个.css文件中，或者我会使用不同的工具呢？

Answer 1

查看名为“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

Answer 2

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

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

2 个答案: