SASS实战

分享SASS在实际项目中的应用，包括目录、文件、代码组织，用法上的最佳实践，以及一些实用的插件，真实体验到SASS对开发流程的改善。

Transcript

1. SASS实战 Samgui @ 2013.08.30
2. 目录结构 “保持良好的目录结构能让你更高效，项目维护性更高”
3. .scss文件与编译后的.css文件同目录
4. 代码结构 “保持良好的代码结构能让你更高效，项目维护性更高”
7. SVN自动注释设置 C:\Users\[samgui]\AppData\Roaming\Subversion\config 开启 enable-auto-props = yes (没有则添加) 添加 *.scss = svn:keywords=Id
8. MIXIN应用场景 “避免重复书写一`大`段代码，同时又具有通用性”
9. 举个栗子
10. 来几个实用的
11. 还可以更多... “把常见的解决方案沉淀成库,统一维护随处取用”
12. EXTEND应用场景 “避免重复书写一`大`段`相对`固定的代码”
13. 举个栗子
14. PLACEHOLDERS才是真爱 ! “EXTEND虽好,但真爱容不下半点瑕疵”
15. 真爱闪亮登场
16. 蛋是.... “但是目前(sass 3.x)还是存在一点小遗憾，@import没有 重复导入检测功能，导致生成重复的代码”
17. 但是...
18. Compass Sprites “`胸器`出场”
19. 基本用法
20. 图片合并前后对比
21. 编译生成的CSS
22. 建议 “单独一个文件进行图片合并，防止一起编译导致等待编 译过程时间过长”
23. Autoprefixer 神来之笔 “compass已很好的解决了浏览器前缀问题，但并不完美 autoprefixer真正解决了此问题，并了却你的后顾无忧” Autoprefixer一个以最好的方式处理浏览器前缀的后处理程序 http://goo.gl/CvnTlM
24. Sass-remote 无痛协作 “RemoteSass是一个小插件，通过它Sass可以通过 HTTP/S导入远程的.sass/.scss样式文件。有了它，我们 可以为多个应用建立一个集中化的服务来管理和共享样式 资源” SASS实战之RemoteSass插件介绍http://goo.gl/SLinSG
25. 谢谢大家！