SASS 让你更爽的编写 CSS

SASS 让你更爽的编写 CSS

Transcript

1. 颂赞   h#p://qiqicartoon.com  
2. What  is  SASS?                SASS  是一个  CSS3  扩展，为  CSS  扩展了嵌套规则、变量、混入、继承、函数   等强大的功能。SASS  的使命是让  CSS  更有趣味 J   •  CSS  超集   •  CSS3  扩展   •  使  CSS  更有趣   •  SCSS  and  SASS   •  Hampton  Catlin、Nathan  Weizenbaum、Chris  Eppstein       h#p://sass-­‐lang.com/  
3. Features   1、Fully  CSS3-­‐compaFble   2、Language  extensions  such  as  variables,  nesFng,  and  mixins   3、Many  useful  funcFons  for  manipulaFng  colors  and  other  values   4、Advanced  features  like  control  direcFves  for  libraries   5、Well-­‐forma#ed,  customizable  output   6、Firebug  integraFon    
4. Welcome  to  the  SASS  world  J  
5. Install  SASS   $  gem  install  sass  
6. Variables   从  $  开始  $variables  name  :  vaiables  value;   SCSS   SASS  
7. Compile  
8. Compile  
9. Nested   SCSS   SASS   CSS  
10. Mixins   SCSS   SASS   CSS  
11. Selector  Inheritance   SCSS   SASS   CSS  
12. Reference  Parent     使用  &  语法糖引用父层  
13. Comments   双斜线注释将被忽略  
14. SASSScript  Data  Types  
15. SASSScript  OperaFons  
16. SASSScript  OperaFons  
17. SASS Script   Oper aFon s-­‐ Color  
18. @import   SASS   CSS   •  @import    “common.css”;   •  @import  “common”  screen;   •  @import  h#p://alipay.com/common.css;   •  @import  url();   •  @import  “common.scss/sass”;   •  @import  “common”;  
19. @media  
20. Control  DirecFves   •  @if   •  @while   •  @for   •  @each  
21. @funcFon  
22. 回过头来再看 SASS   •  大型样式表   •  制定样式规范   •  团队开发   优点   缺点   适用于   •  学习成本低   •  降低样式表维护成本   •  适用于多人开发   •  性能优越   OMG，我无缺点 J  
23. SASS  VS  LESS   •  实现原理不同   •  创建变量的方式不同   •  预编绎机制不同   •  作用域表现不同   •  mixin  方式不同   •  SASS  比  LESS  的数学运算能力更强   •  LESS  没有  SASS  的  Control  DirecFve    
24. Hi,Let’s  wriFng    SASS  J     @知托付-­‐颂赞