和所有项目一样，我们希望项目的文件夹结构尽量保持规范化。
这样的好处是能够更快的定位文件和降低学习曲线。
针对 Scss 的文件夹架构可以采取下面的结构。
sass/
|
|- abstracts/
| |- _variables.scss
| |- _media-query.scss
| |- _colors.scss
| ...
| |- _index.scss
|
|- base/
| |- _base.scss
| |- _reset.scss
| ...
| |- _index.scss
|
|- utilities/
| |- _main.scss
| |- _container.scss
| |- _exceptions.scss
| ...
| |- _index.scss
|
|- components/
| |- _buttons.scss
| |- _carousel.scss
| |- _dropdown.scss
| ...
| |- _index.scss
|
|- layout/
| |- _header.scss
| |- _sidebar.scss
| |- _footer.scss
| ...
| |- _index.scss
|
|- pages/
| |- _about.scss
| |- _contact.scss
| ...
| |- _index.scss
|
|- themes/
| |- _theme.scss
| |- _admin.scss
| ...
| |- _index.scss
|
|- vendors/
| |- _bootstrap.scss
| |- _modern-reset.scss
| ...
| |- _index.scss
|
|- style.scss
针对上面的文件夹结构，我们的参考下面的说明：
base：放置一些基本样式的SCSS文件，比如重置样式_normalize.scss，基本样式_base.scss，文本排版样式_typography.scss等
components：放置一些公用组件，比如：按钮_buttons.scss、表单_form.scss、表格_tables.scss、选项卡_tabs.scss等
helps：放置一些辅助功能性文件，比如：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
layout：放置一些跟页面布局相关的，比如：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等
pages:放置跟具体项目页面相关的样式文件。
themes：对于一些有前后台页面，或者需换肤的项目，就可以将相关文件放置在这里。
vendors：引用的外部插件或者框架的SCSS文件，比如_bootstrap.scss、_foundation.scss。
style.scss这是主样式文件，最终编译，就编译这个问题。当然根据项目大小，可做一些其他处理。比如说针对不同的页面,创建不同的page_xxx.scss文件。
不是所有项目都遵守这个文件命名格式的，我们采用这个格式主要为了让前端工程师能够更好的遵守规范。