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模式是个不错的选择。

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

参考资料链接

posted @ 2018-03-31 15:43  烂拖鞋  阅读(758)  评论(0)    收藏  举报