PSD>HTML+SASS+jQuery

“ “ P h o t o S h o p

I l l u s t r a t o r

H T M L C S S j Q u e r y

http://www.mollylin.net

http://github.com/MollyLin

https://www.facebook.com/mollylin2014

mollylin2014@gmail.com

• Index.html

• Trainings.html

• Timetable.html

•Nutrition.html

• Contacts.html

• _varible.sass

• _extend.sass

• _mixin.sass

• _reset.sass

• _layout.sass

• _各網頁名稱.sass

• default.sass

• default.css

• bjqs.css

• Jquery-latest.min.js

• Bjqs-1.3.js

設定好環境並PSD切版

PSD 切版並匯出為影像檔

建立專案夾

_extend.sass _mixin.sass _reset.sass _variable.sass _index.sass default.sass config.rb

default.css

bg.jpg logo.png slider-1.png . . .

建立@ import列表

設定全域變數

default.sass

_mixin.sass _variable.sass _extend.sass

自動算出圖片寬高 設定常用樣式

建立_layout.sass寫入表頭表尾

開始寫入各頁樣式

.sass .css

compile/編譯

進階語法 同步生成

加速開發時程、方便維護與修改

引入jQuery實作Benner輪播

jquery-latest.min.js

bjqs-1.3.js

bjqs-1.3.css

作品線上展示

http://mollylin.github.io/Work01-FitnessClub