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

SASS实战

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

 SASS实战

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

E0c987d94d37f5d19f5b6c4fedff65e0?s=128

三 桂

March 31, 2014
Tweet

More Decks by 三 桂

See All by 三 桂
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
110
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
1
190
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
43
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
73
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
7
270

Other Decks in Technology

See All in Technology
D7e58c3627cba51ea08a554ccdb15d16?s=48 mita2
0
220
E8ac626646da35420ffba5da02f4787d?s=48 ohsawa0515
0
280
54bcc1069d75636cc735e72877dd30ec?s=48 taichinakamura
0
1k
D69e77fd50edf1a9c6d5ffcddd03dd90?s=48 funnysystems
1
1.2k
8d5ec86449745c31872afc6efdaf2f0a?s=48 freedom_tk
1
230
Cdfff9be12b12849f1eeb94b2196aca5?s=48 chizuchizu
1
270
98a2aff83d5731c9e153a3f221fc08ab?s=48 kazkanda
0
260
Ac5b39a4b12e8ca2d6e25b9e7cc142ae?s=48 djain2405
1
130
E10d51de51c08e913216385be87dc1ca?s=48 pongzu
2
300
1d1580fb0945b0ffadff18e28bead3c5?s=48 adarapata
2
340
B16717ef4b7aab0b253d933c3934f280?s=48 mixi_engineers
0
370
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
270

Featured

See All Featured
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
24fc194843a71f10949be18d5a692682?s=48 gr2m
85
11k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
11
750
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
17
4.6k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
203
20k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.8k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
360
62k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
302
32k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
23
2.3k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.1k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
1.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. 谢谢大家！