SASS模块化前端架构

1. 为什么前端架构

1. 减少开发时间
2. 降低开发成本
3. 降低代码冲突

2. 实现目标

1. 程序员只需要写自己的模块
2. 切换主题

3. sass结构分析架构

Paste_Image.png

1. block为一个一个的页面块
2. cpblock为混合模块
3. helper是处理函数
4. layout为布局
5. vender为引入外部插件样式
6. main.sass为引入文件

4. 架构核心layout

Paste_Image.png

1. normal 代表主题
2. normal底下的page为当前当前block引入组合块 , 他负责把页面中的block进行布局
3. _base.scss ,_normal.scss都是当前主题下的基本变量

5. 实现主题切换思路

1. 在当前normal的同级目录增加一个新的主题文件集比如 blue
2. 通过在界面中动态给当前body增加blue样式来实现主题切换
3. blue中的代码继承normal中的所有样式 ,覆盖差异部分

今天就分享这么多 , 欢迎大家给出更多指导意见