Sass 构建之 7-1模式
Sass 项目结构之7-1模式
7-1模式的结构：7个文件夹，1个文件。
基本上，你需要将所有的部件放进7个不同的文件夹和一个位于根目录的文件（通常用main.scss或者app.scss）
编译时会根据main.scss引用所有文件夹而形成一个CSS样式表
7个文件夹
abstracts/base/components/layout/pages/themes/vendors/
1个文件
main.scss
Base文件夹
base/文件夹存放项目中的模板文件。定义一些HTML元素公认的标准样式。
比如：Reset.css 和 normalize.css 等
_base.scss_reset.scss_typography.scss_animations.scss
Layout文件夹
layout/文件夹存放构建网站或者应用很小使用到的布局部分。常见的如：
_grid.scss_header.scss_footer.scss_sidebar.scss_forms.scss_navigation.scss
Components文件夹
该文件夹包含各类具体模块，基本上是所有的独立模块，划分可以参考一些UI库的来划分，如:
_media.scss_carousel.scss_thumbnails.scss_alert.scss_badge.scss_button.scss_modal.scss
等等，这个文件夹理应做到每个文件对应一个独立的组件，或者在该目录下再开个目录button/
用components/目录下的_button.scss做链接，链接button/中所有文件
_button.scss文件只负责@import，而实际功能在文件夹button/所有文件中
一般做链接的文件不该用_前缀，而是用button.scss来区分，实际功能才用_前缀
//button.scss
@import "./button/_blue-button";
@import "./button/_red-button";
Pages文件夹
存放页面文件，就是那个页面内具有独特的样式，如：
_home.scss_index.scss
Themes文件夹
主题文件夹，类似Bootstrap中的_variables.scss文件,存放着整个app的变量，组件的样式值基本引用于该文件。
只要改变_variables.scss中的值，就可以切换一种主题。
_theme.scss_admin.scss_variables.scss
Abstracts文件夹
辅助工具文件夹，可以存放每一个全局变量、函数、混合宏以及占位符。如：
_variables.scss_mixins.scss_functions.scss_placeholders.scss
文件夹名字和这些文件只是参考，不喜欢也可以utils,如果_mixins.scss很大，
可以在该文件夹下再创一个mixins/，mixins.scss充当链接@import
Vendors文件夹
外来项目文件夹，存放一些外部库和框架(Normalize,Bootstrap,jQueryUI等)
_normalize.scss_bootstrap.scss_jquery-ui.scss
入口文件
主文件，main.scss，除@import和注释外，该文件不应该包含任何其他代码
为了保持可读性，主文件应遵循如下准则:
- 每个
@import引用一个文件； - 每个
@import单独一行； - 从相同文件夹中引入的文件之间不用空行；
- 从不同文件夹中引入的文件之间空行分隔；
- 忽略文件扩展名和下划线前缀
下面以一个单页面
app.scss文件为例
这个案例的模式我是参考bootstrap的框架的，非7-1模式，任何模式都只供参考
具体怎么用，请按具体业务应用使用
_global.scss_animations.scssapp.scssmixins/functions/components/containers/
//参考bootstrap架构
//xxx : 表示同理
//app.scss
//导入变量
@import 'variables';
//导入mixins
@import './mixins/clearfix';
@import './mixins/xxx';
//导入functions
@import './functions/px2rem'
@import './functions/xxx';
//导入动画
@import 'animations'
//导入基本设置，排版、html标签等全局样式
@import 'global.scss';
//导入components
@import './component/button';
@import './component/xxx';
//导入containers
@import './containers/index';
@import './containers/xxx';
总结
7-1模式，只供参考，具体怎么搭，最好按项目来。
如果项目比较小，用7-1模式就不必要了，参考bootstrap的架构就可以了
如果项目很大，采用7-1模式是个不错的选择。
最主要的是学习其中项目管理的思想。
