繼續(xù)上一篇所講的編譯scss的gulp解決方案须眷，重點(diǎn)介紹在實(shí)際項(xiàng)目中撤逢，如何去構(gòu)建scss颜屠，在項(xiàng)目中js與html模塊的介紹后期再做詳解
項(xiàng)目初始化
# 先安裝nodeJs晴氨、npm
# 然后安裝NPM模塊
$ npm install
# 構(gòu)建項(xiàng)目
$ gulp
目錄結(jié)構(gòu)
／project/
/dist #最終輸出和使用的目錄
/js # 腳本目錄
／css ＃ 樣式目錄
／src #原文件目錄
／html # HTML原文件目錄
／js # JS 源文件目錄
／scss # SCSS原文件目錄
／base # scss核心控制模塊
/mixin # 全局方法定義模塊
/variable # 變量定義模塊
fn.scss # 全局方法以及變量加載
reset.scss # 默認(rèn)行為修改文件
/widget # scss 組件化模塊
/app.scss # 最終加載需要編譯的scss模塊
scss結(jié)構(gòu)說明
- /base
全局函數(shù)定義以及css全局樣式變量定義。
／mixin
封裝界面常用常用的兼容性寫法魂贬，可以參考Prefixes.scss巩割。通用型樣式的封裝 - ／widget
組件化編寫界面組件，以button組件為例：
/button # button組件
／btn-default.scss # 按鈕默認(rèn)狀態(tài)以及文字背景樣式配置
／btn-global.scss # 基礎(chǔ)按鈕樣式定義
／btn.scss # 按鈕的結(jié)構(gòu)類型配置 # *block inline-block...*
- app.scss
加載項(xiàng)目中需要編譯輸出的scss源碼模塊付燥，例如宣谈，此項(xiàng)目中只做個(gè)button模塊，那么在app.scss中只要添加兩個(gè)部分
@charset "UTF-8";
@import "./base/reset";
@import "./widget/button/w_button";
其它組件的編寫與button組件編寫以及加載的方式一致
關(guān)于scss的使用方法和說明键科，可以參考方法的文檔蒲祈。sass
