参考：https://www.sasscss.com/sass-guidelines/architecture/
背景说明：
@import 指令引入和css的引入不同（引入非css原文件），Sass的引入最终编译成css文件时，是把引入的文件归纳到一个文件中，即合并成一个文件，而不是css那样，产生额外的网络请求去获取内容。
@import 指令工作原理，Sass实际编程中可以将结构划分的特别细，多个文件多个目录，即可以拆分代码库到几个文件中，而又不会影响性能，且方便维护与重用。
7-1ģʽ
7-1 ģʽmain.scss）中――这个文件编译时会引用所有文件夹而形成一个 CSS 样式表。
abstracts/base/components/layout/pages/themes/vendors/
当然还有它:
main.scss
理想情况下，目录层次如下所示：
文件命名要遵循如上统一的命名规则：使用连字符界定。
Base文件夹
base/文件夹存放项目中的模板文件。在这里，可以找到重置文件、排版规范文件或者一个样式表――定义一些 HTML 元素公认的标准样式（我喜欢命名为_base.scss）。
_base.scss_reset.scss_typography.scss
如果你的项目中使用了大量的_animations.scss
Layout文件夹
layout/
_grid.scss_header.scss_footer.scss_sidebar.scss_forms.scss_navigation.scss
layout/partials/, 具体使用情况取决于个人喜好。
Components文件夹
components/layout/宏观（定义全局线框结构），components/components/
_media.scss_carousel.scss_thumbnails.scss
components/modules/, 具体使用情况取决于个人喜好。
Pages文件夹
pages/pages/_home.scss
_home.scss_contact.scss
取决于各自的开发流程，这些文件可以使用你自己的前缀命名，避免在最终样式表中与他人的样式表发生合并。一切完全取决于你。
Themes文件夹
themes/
_theme.scss_admin.scss
这个文件夹与项目的具体实现有密切关系，并且在许多项目中是并不存在的。
Abstracts 文件夹
abstracts/
该文件夹的经验法则是，编译后这里不应该输出任何 CSS，单纯的只是一些 Sass 辅助工具。
_variables.scss_mixins.scss_functions.scss_placeholders.scss
当项目体量庞大工具复杂时，通过主题而不是类型分类整理可能更有帮助，比如排版（_typography.scss）、主题（_theming.scss）等。每一个文件都包含所有的相关信息：变量、函数、混合宏和占位符。这样做可以让维护更加单，特别针对于文件较长的情况。
abstracts/helpers/utilities，具体使用情况取决于个人喜好。
Vendors文件夹
vendors/
_normalize.scss_bootstrap.scss_jquery-ui.scss_select2.scss
vendors-extensions/
例如，vendors-extensions/_boostrap.scss
入口文件
main.scss@import
文件应该按照存在的位置顺序依次被引用进来：
abstracts/vendors/base/layout/components/pages/themes/
为了保持可读性，主文件应遵守如下准则：
@import引用一个文件；@import单独一行；- 从相同文件夹中引入的文件之间不用空行；
- 从不同文件夹中引入的文件之间用空行分隔；
- 忽略文件扩展名和下划线前缀。
@import 'abstracts/variables'; @import 'abstracts/functions'; @import 'abstracts/mixins'; @import 'abstracts/placeholders'; @import 'vendors/bootstrap'; @import 'vendors/jquery-ui'; @import 'base/reset'; @import 'base/typography'; @import 'layout/navigation'; @import 'layout/grid'; @import 'layout/header'; @import 'layout/footer'; @import 'layout/sidebar'; @import 'layout/forms'; @import 'components/buttons'; @import 'components/carousel'; @import 'components/cover'; @import 'components/dropdown'; @import 'pages/home'; @import 'pages/contact'; @import 'themes/theme'; @import 'themes/admin'; 这里还有另一种引入的有效方式。令人高兴的是，它使文件更具有可读性；令人沮丧的是，更新时会有些麻烦。不管怎么说，由你决定哪一个最好，这没有任何问题。 对于这种方式，主要文件应遵守如下准则：
- 每个文件夹只使用一个
@import - 每个
@import之后都断行 - 每个文件占一行
- 新的文件跟在最后的文件夹后面
- 文件扩展名都可以省略
@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins', 'abstracts/placeholders'; @import 'vendors/bootstrap', 'vendors/jquery-ui'; @import 'base/reset', 'base/typography'; @import 'layout/navigation', 'layout/grid', 'layout/header', 'layout/footer', 'layout/sidebar', 'layout/forms'; @import 'components/buttons', 'components/carousel', 'components/cover', 'components/dropdown'; @import 'pages/home', 'pages/contact'; @import 'themes/theme', 'themes/admin'; 关于 Globbing
*.scss，其工作机制是通过表达式而不是文件名列表来匹配文件组。在 Sass 中，可以在入口文件中通过通配符扩展的形式导入其他文件，导入后的入口文件类似如下所示：
@import 'abstracts/*'; @import 'vendors/*'; @import 'base/*'; @import 'layout/*'; @import 'components/*'; @import 'pages/*'; @import 'themes/*'; Sass 并不直接支持通配符扩展的机制，这是因为 CSS 样式是对声明顺序非常敏感的，当我们使用通配符扩展的形式导入文件时，文件通常按照字典序导入，这种方式无法控制文件的导入顺序，继而会引起样式的错乱。
也就是说，在一个严格基于组件构成的架构中，必须十分注意组件之间的样式顺序，避免遗漏和错误覆盖任何样式。所以必须保证文件顺序对样式没有影响，方能使用通配符扩展模式。使用通配符扩展模式最大的好处就是无需再花费时间处理入口文件中文件的增加和删除。