SASS实战

Transcript

1. SASS实战 Samgui @ 2013.08.30

2. 目录结构 “保持良好的目录结构能让你更高效，项目维护性更高”

3. .scss文件与编译后的.css文件同目录

4. 代码结构 “保持良好的代码结构能让你更高效，项目维护性更高”

5. None
6. None

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. 谢谢大家！