Contenu connexe
Similaire à 高雄前端社群 #3 SASS workshop
Similaire à 高雄前端社群 #3 SASS workshop (20)
高雄前端社群 #3 SASS workshop
- 8. 之後還有很多議程
1. RWD 進階經驗分享
2. RWD Workshop
3. Sublime text 3 Workshop
4. 如何透過jQuery撰寫動畫效果。
5. Sass framwork (Susy、bootstrap)
6. Angular.js
7. CSS之OOCSS、SMACSS設計模式
8. CSS3 animation
9. web窗口合作流程分享
- 10. 1. 為什麼網頁設計師需要SASS? (50min)
2. SASS介紹(60min)
1. 王志誠 – CSS selector (10 min)
2. 以實務面切入SASS 語法教學
3. 工具分享(Sublime text 2、Compass、Fire.app)
3. 實際練習與操作(30min)
主題
- 16. .Box h1{..}
.Box ul {..}
.Box li {..}
.Box li a {..}
.Box li a i {..}
.Box li a em {..}
.Box span {..}
.Box .box_inside {..}
寫CSS時狂複製貼上
- 17. .new-box h1{..}
.new-box ul {..}
.new-box li {..}
.Box li a {..}
.Box li a i {..}
.Box li a em {..}
.Box span {..}
.Box .box_inside {..}
模組化也很不方便
- 18. CSS3前綴詞改一個設定,同時要改多個
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);