Sass compass

1,174 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,174
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sass compass

  1. 1. Sass & Compass<br />—— 洪珊珊 2011.04.20<br />
  2. 2. 拥抱HTML5中的分享者<br />薛良斌<br />(布丁大哥)<br />hlb@twitter.com<br />Iamhlb.com <br />分享视频:http://v.ku6.com/special/show_4135580/0xiGfezZqb9Gl7TU.html<br />
  3. 3. Sass<br />http://sass-lang.com/<br />
  4. 4. Sass可以做什么?<br />更好的管理与维护CSS<br />更快乐的写CSS<br />
  5. 5. Sass 与 CSS的关系(语法)<br />sass<br />css<br />
  6. 6. Sass的语法<br />.sass<br />table.hl<br /> margin: 2em 0<br />td.ln<br /> text-align: right<br />li<br /> font: <br /> family: serif<br /> weight: bold<br /> size: 1.2em<br />.scss<br />table.hl { <br /> margin: 2em 0;<br />td.ln {<br /> text-align: right;<br /> }<br /> } <br />li { <br /> font: {<br /> family: serif;<br /> weight: bold;<br /> size: 1.2em;<br /> }<br /> }<br />
  7. 7. Sass的语法<br />Nesting (巢状)<br />Variables(变量)<br />Parent References (父级相关)<br />Operations and Functions (运算和函数)<br />Interpolation(插补)<br />Mixins (混合)<br />Arguments (参数)<br />Import (引入)<br />… …<br />
  8. 8. Compass 是什么?<br />基于sass的框架<br />管理框架的框架(框架的框架)<br />可以动态引入已经预定义好的CSS样式<br />http://compass-style.org/<br />
  9. 9. 思考<br />我们是否可以构建一个属于自己的,类似compass的CSS框架,使得更好的维护我们的CSS<br />
  10. 10. 谢谢!<br />

×