SASS 目录结构的管理
对于大型项目来说，前端的页面很多，如果不能很好的管理 SASS 的目录结构或者架构，后续的维护可能会非常困难。SASS 7-1 是官方的一个最佳实践，就是将 SASS 文件按照不同的类别放入不同目录中，包括以下目录和文件
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
文件目录
main.scss
下面是一个具体的例子
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
main.scss
main.scss 是主文件也是整个网站或者应用的入口文件，它主要的的作用就是将系统中其他的 scss 文件引入进来，编译的时候只要指定这个主文件就可以了，当然，新增任何文件都要加入到main.scss 中。
base 目录
主要把一些共享的文件放到该目录下，例如，style reset、字体、公共样式等。
layout 目录
Layout 主要放入一些布局文件，比如说页面布局后分成了多个部分，例如三栏布局、圣杯布局。
components 目录
页面上的一些公用的组件，通常会把这些组件抽出来作为公用的文件来提高复用率，例如，按钮、弹窗、表格等。
pages 目录
不同页面可能有不同样式效果，对于页面级别的样式放到 pages 目录下。
abstracts 目录
将项目中的公用工具放到此目录下，包括 mixins、variables、functions和 placeholders等，按照类型进行分配。如果项目比较大，按照类型分配的方式可能会使得单个文件变得很大，也可以按照功能模块再进行划分。
themes 目录
如果应用会用到不同的主题或者风格，将样式文件放到 themes 目录下。
vendors 目录
如果有第三方的样式文件，放到 vendors 目录下。
SASS 官方的目录结构，提供了一种思路，其实目录结构怎么安排并不重要，重要的是我们在开发的过程中要对文件进行规划，从而让维护更加省时便捷。
