SASS 让你更爽的 编写CSS

1. 颂赞
http://qiqicartoon.com

2. What is SASS?
SASS 是一个 CSS3 扩展，为 CSS 扩展了嵌套规则、变量、混入、继承、函数
等强大的功能。SASS 的使命是让 CSS 更有趣味 
http://sass-lang.com/
• CSS 超集
• CSS3 扩展
• 使 CSS 更有趣
• SCSS and SASS
• Hampton Catlin、Nathan Weizenbaum、Chris Eppstein

3. Features
1、Fully CSS3-compatible
2、Language extensions such as variables, nesting, and mixins
3、Many useful functions for manipulating colors and other values
4、Advanced features like control directives for libraries
5、Well-formatted, customizable output
6、Firebug integration

4. Welcome to the SASS world 

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 Operations

16. SASSScript Operations

17. SASS
Script
Oper
ation
s-
Color

18. @import
SASS CSS
• @import “common.scss/sass”; • @import “common.css”;
• @import “common”; • @import “common” screen;
• @import http://alipay.com/common.css;
• @import url();

19. @media

20. Control Directives
• @if
• @while
• @for
• @each

21. @function

22. 回过头来再看 SASS
优点 缺点
• 学习成本低
•
•
降低样式表维护成本
适用于多人开发
OMG，我无缺点 
• 性能优越
适用于
• 大型样式表
• 制定样式规范
• 团队开发

23. SASS VS LESS
• 实现原理不同
• 创建变量的方式不同
• 预编绎机制不同
• 作用域表现不同
• mixin 方式不同
• SASS 比 LESS 的数学运算能力更强
• LESS 没有 SASS 的 Control Directive

24. Hi,Let’s writing SASS 
@知托付-颂赞