展示PSD切版與使用SASS編譯能力

1. PSD>HTML+SASS+jQuery

2. “
“
Ph o t o S ho p
Il l u str at or
HTM L CS S j Qu e r y
http://www.mollylin.net
http://github.com/MollyLin
https://www.facebook.com/mollylin2014
mollylin2014@gmail.com

3. • 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

4. 設定好環境並PSD切版
PSD 切版並匯出為影像檔

5. 建立專案夾
_extend.sass
_mixin.sass
_reset.sass
_variable.sass
_index.sass
default.sass
config.rb
default.css
bg.jpg
logo.png
slider-1.png
...

6. 建立@ import列表
設定全域變數
default.sass
_mixin.sass_variable.sass _extend.sass
自動算出圖片寬高 設定常用樣式

7. 建立_layout.sass寫入表頭表尾

8. 開始寫入各頁樣式

9. .sass .css
compile/編譯
進階語法 同步生成

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

12. 引入jQuery實作Benner輪播
jquery-latest.min.js
bjqs-1.3.js
bjqs-1.3.css

13. 作品線上展示
http://mollylin.github.io/Work01-FitnessClub