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.scss
• app.scss
• mixins/
• 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模式是个不错的选择。

最主要的是学习其中项目管理的思想。

---

参考资料链接

• Sass Guidlines
• 中文版(大漠.译)