SASS实战

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

 SASS实战

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

E0c987d94d37f5d19f5b6c4fedff65e0?s=128

三 桂

March 31, 2014
Tweet

More Decks by 三 桂

See All by 三 桂
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
91
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
1
170
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
43
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
0
52
E0c987d94d37f5d19f5b6c4fedff65e0?s=48 and1coder
7
270

Other Decks in Technology

See All in Technology
9f96c3fd49e6a294e521175f2ad80b71?s=48 usamomokawa
0
170
107ba69ff7888cacdb4307a28adf5527?s=48 fukuiretu
0
340
6d87223b5fcfb9a5a73007f77f134e28?s=48 taketora
0
120
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
390
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
4
550
946e30b09fe86e2a1fcd0ac4ee8e9749?s=48 vedcraft
0
230
4c3618a60d581eff58b86175b1bd427d?s=48 hikipla
0
170
34fcd5f1deeb25b1138e9845137feb6e?s=48 kakutani
2
560
D9130a0952480278c7f44527c6989da7?s=48 syoshie
6
490
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
130
C636093440dd4a8be6416e83cb980979?s=48 iselegant
7
420
17d762ae166e66cab39e9b2e3df7d198?s=48 ysakashita
3
620

Featured

See All Featured
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
111
24k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
251
19k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.3k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
284
110k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
8
580
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
607
54k

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