scss项目构建说明

继续上一篇所讲的编译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结构说明

1. /base
   全局函数定义以及css全局样式变量定义。
   ／mixin
   封装界面常用常用的兼容性写法，可以参考Prefixes.scss。通用型样式的封装
2. ／widget
   组件化编写界面组件，以button组件为例：

    /button  # button组件
        ／btn-default.scss   # 按钮默认状态以及文字背景样式配置
        ／btn-global.scss    # 基础按钮样式定义
        ／btn.scss           # 按钮的结构类型配置 # *block inline-block...*

3. app.scss
   加载项目中需要编译输出的scss源码模块，例如，此项目中只做个button模块，那么在app.scss中只要添加两个部分

@charset "UTF-8";
@import "./base/reset";
@import "./widget/button/w_button";

其它组件的编写与button组件编写以及加载的方式一致
关于scss的使用方法和说明，可以参考方法的文档。sass