CSS 预处理及评价项目实践

Transcript

1. CSS预处理及评价项目实践 蓝面小生 2012/12/25
2. 历史 @蓝面小生 #互动团队 style.css reset.css typography.css grids.css utilities.css button.css ie6.css
3. 问题 @蓝面小生 #互动团队  维护  扩展  重构  开发  效率  质量
4. SASS
5. 变量($var) @蓝面小生 #互动团队
6. 混合(@mixin) @蓝面小生 #互动团队
7. 继承(@extend) @蓝面小生 #互动团队
8. 层级(&) @蓝面小生 #互动团队
9. 控制语句（@if,@for,@each,@while） @蓝面小生 #互动团队
10. 导入（@import） @蓝面小生 #互动团队
11. 内容（@content） @蓝面小生 #互动团队
12. 函数（@function） @蓝面小生 #互动团队
13. 也许你认为重点已经讲完了 But
14. @蓝面小生 #互动团队 Compass
15. 功能 @蓝面小生 #互动团队 • 跨浏览器支持 • 自动合并图片 • 定制自己的CSS基础库 Blue Print
16. 跨浏览器支持（@import compass/css3） @蓝面小生 #互动团队
17. 合并图片 @蓝面小生 #互动团队 @import “list/*.png”; @include all-list-sprites;
18. 合并类型 @蓝面小生 #互动团队
19. 也许你认为重点已经讲完了 But
20. @蓝面小生 #互动团队 评价项目实践
21. 环境准备 @蓝面小生 #互动团队 Aptana + Ruby gem install compass
22. 项目创建 @蓝面小生 #互动团队 comapss create feedback-simple
23. 项目配置 @蓝面小生 #互动团队
24. 项目设计 @蓝面小生 #互动团队 结构 视觉
25. 缺陷 @蓝面小生 #互动团队 • SASS • 不支持import CSS文件 • Compass • 基础框架不符合现有国际站的规划，需要修正
26. Q&A