Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
SASS实战
三 桂
March 31, 2014
Technology
2
170
SASS实战
分享SASS在实际项目中的应用,包括目录、文件、代码组织,用法上的最佳实践,以及一些实用的插件,真实体验到SASS对开发流程的改善。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
and1coder
0
100
and1coder
1
180
and1coder
0
43
and1coder
0
67
and1coder
7
270
Other Decks in Technology
See All in Technology
mii3king
0
420
oracle4engineer
0
3.6k
khrd
1
410
grapecity_dev
0
170
lmi
2
970
eayedi
2
140
pohjus
0
3.3k
raykataoka
9
8.1k
tnmt
2
190
whitefox_73
0
190
hashhub
3
16k
sat
40
29k
Featured
See All Featured
bryan
100
11k
zenorocha
296
40k
jlugia
217
16k
hannesfritz
28
950
bkeepers
52
4.2k
samanthasiow
56
6.4k
cherdarchuk
71
260k
yeseniaperezcruz
302
31k
destraynor
223
47k
kneath
294
39k
brad_frost
157
6.4k
michaelherold
224
8.5k
Transcript
SASS实战 Samgui @ 2013.08.30
目录结构 “保持良好的目录结构能让你更高效,项目维护性更高”
.scss文件与编译后的.css文件同目录
代码结构 “保持良好的代码结构能让你更高效,项目维护性更高”
None
None
SVN自动注释设置 C:\Users\[samgui]\AppData\Roaming\Subversion\config 开启 enable-auto-props = yes (没有则添加) 添加 *.scss =
svn:keywords=Id
MIXIN应用场景 “避免重复书写一`大`段代码,同时又具有通用性”
举个栗子
来几个实用的
还可以更多... “把常见的解决方案沉淀成库,统一维护随处取用”
EXTEND应用场景 “避免重复书写一`大`段`相对`固定的代码”
举个栗子
PLACEHOLDERS才是真爱 ! “EXTEND虽好,但真爱容不下半点瑕疵”
真爱闪亮登场
蛋是.... “但是目前(sass 3.x)还是存在一点小遗憾,@import没有 重复导入检测功能,导致生成重复的代码”
但是...
Compass Sprites “`胸器`出场”
基本用法
图片合并前后对比
编译生成的CSS
建议 “单独一个文件进行图片合并,防止一起编译导致等待编 译过程时间过长”
Autoprefixer 神来之笔 “compass已很好的解决了浏览器前缀问题,但并不完美 autoprefixer真正解决了此问题,并了却你的后顾无忧” Autoprefixer一个以最好的方式处理浏览器前缀的后处理程序 http://goo.gl/CvnTlM
Sass-remote 无痛协作 “RemoteSass是一个小插件,通过它Sass可以通过 HTTP/S导入远程的.sass/.scss样式文件。有了它,我们 可以为多个应用建立一个集中化的服务来管理和共享样式 资源” SASS实战之RemoteSass插件介绍http://goo.gl/SLinSG
谢谢大家!