Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SASS实战

E0c987d94d37f5d19f5b6c4fedff65e0?s=47 三 桂
March 31, 2014
Technology
2
170

 SASS实战

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

E0c987d94d37f5d19f5b6c4fedff65e0?s=128

三 桂

March 31, 2014
Tweet

More Decks by 三 桂

See All by 三 桂
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
100
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
1
180
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
43
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
67
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
7
270

Other Decks in Technology

See All in Technology
40c17fd99791bbfbed1730cd1ae5a2c0?s=48 mii3king
0
420
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
3.6k
9a883e4b99553b96d3ecf5a47aa6f233?s=48 khrd
1
410
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
170
3373c144fef1d3518b9b3f24a6b46ad0?s=48 lmi
2
970
Fd51a3e98f756983c75edeb0f74beaaa?s=48 eayedi
2
140
D9e65f4b0af059ae9ba243c8c2265e4f?s=48 pohjus
0
3.3k
5a065e7ea7c56f4b04c2271771688df3?s=48 raykataoka
9
8.1k
D7df6557c6b98f29ac546911e2b1a4d4?s=48 tnmt
2
190
83c3e0e87371c50399ac898308bdbb92?s=48 whitefox_73
0
190
Add4ea030be9e6aa7a319fc8c1b587c6?s=48 hashhub
3
16k
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
40
29k

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
40k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
28
950
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.2k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.4k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
302
31k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
47k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.4k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.5k

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