继续上一篇所讲的编译scss的gulp解决方案，重点介绍在实际项目中，如何去构建scss，在项目中js与html模块的介绍后期再做详解
项目初始化
# 先安装nodeJs、npm
# 然后安装NPM模块
$ npm install
# 构建项目
$ gulp
目录结构
／project/
/dist #最终输出和使用的目录
/js # 脚本目录
／css ＃ 样式目录
／src #原文件目录
／html # HTML原文件目录
／js # JS 源文件目录
／scss # SCSS原文件目录
／base # scss核心控制模块
/mixin # 全局方法定义模块
/variable # 变量定义模块
fn.scss # 全局方法以及变量加载
reset.scss # 默认行为修改文件
/widget # scss 组件化模块
/app.scss # 最终加载需要编译的scss模块
scss结构说明
- /base
全局函数定义以及css全局样式变量定义。
／mixin
封装界面常用常用的兼容性写法，可以参考Prefixes.scss。通用型样式的封装 - ／widget
组件化编写界面组件，以button组件为例：
/button # button组件
／btn-default.scss # 按钮默认状态以及文字背景样式配置
／btn-global.scss # 基础按钮样式定义
／btn.scss # 按钮的结构类型配置 # *block inline-block...*
- app.scss
加载项目中需要编译输出的scss源码模块，例如，此项目中只做个button模块，那么在app.scss中只要添加两个部分
@charset "UTF-8";
@import "./base/reset";
@import "./widget/button/w_button";
其它组件的编写与button组件编写以及加载的方式一致
关于scss的使用方法和说明，可以参考方法的文档。sass
