颂赞http://qiqicartoon.com
What is SASS?  SASS 是一个 CSS3 扩展,为 CSS 扩展了嵌套规则、变量、混入、继承、函数等强大的功能。SASS 的使命是让 CSS 更有趣味 http://sass-lang.com/•   CSS 超集•   CS...
Features1、Fully CSS3-compatible2、Language extensions such as variables, nesting, and mixins3、Many useful functions for man...
Welcome to the SASS world 
Install SASS$ gem install sass
Variables从 $ 开始 $variables name : vaiables value; SCSS                                      SASS
Compile
Compile
NestedSCSS   SASS     CSS
MixinsSCSS   SASS     CSS
Selector InheritanceSCSS         SASS       CSS
Reference Parent使用 & 语法糖引用父层
Comments           双斜线注释将被忽略
SASSScript Data Types
SASSScript Operations
SASSScript Operations
SASSScriptOperation  s-Color
@importSASS                            CSS• @import “common.scss/sass”;   •   @import “common.css”;• @import “common”;    ...
@media
Control Directives•   @if•   @while•   @for•   @each
@function
回过头来再看 SASS优点                    缺点•   学习成本低••    降低样式表维护成本    适用于多人开发                 OMG,我无缺点 •   性能优越                适...
SASS VS LESS• 实现原理不同• 创建变量的方式不同• 预编绎机制不同• 作用域表现不同• mixin 方式不同• SASS 比 LESS 的数学运算能力更强• LESS 没有 SASS 的 Control Directive
Hi,Let’s writing SASS    @知托付-颂赞
Upcoming SlideShare
Loading in...5
×

SASS 让你更爽的 编写CSS

1,137

Published on

SASS 让你更爽的 编写CSS

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

No Downloads
Views
Total Views
1,137
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "SASS 让你更爽的 编写CSS "

  1. 1. 颂赞http://qiqicartoon.com
  2. 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. 3. Features1、Fully CSS3-compatible2、Language extensions such as variables, nesting, and mixins3、Many useful functions for manipulating colors and other values4、Advanced features like control directives for libraries5、Well-formatted, customizable output6、Firebug integration
  4. 4. Welcome to the SASS world 
  5. 5. Install SASS$ gem install sass
  6. 6. Variables从 $ 开始 $variables name : vaiables value; SCSS SASS
  7. 7. Compile
  8. 8. Compile
  9. 9. NestedSCSS SASS CSS
  10. 10. MixinsSCSS SASS CSS
  11. 11. Selector InheritanceSCSS SASS CSS
  12. 12. Reference Parent使用 & 语法糖引用父层
  13. 13. Comments 双斜线注释将被忽略
  14. 14. SASSScript Data Types
  15. 15. SASSScript Operations
  16. 16. SASSScript Operations
  17. 17. SASSScriptOperation s-Color
  18. 18. @importSASS CSS• @import “common.scss/sass”; • @import “common.css”;• @import “common”; • @import “common” screen; • @import http://alipay.com/common.css; • @import url();
  19. 19. @media
  20. 20. Control Directives• @if• @while• @for• @each
  21. 21. @function
  22. 22. 回过头来再看 SASS优点 缺点• 学习成本低•• 降低样式表维护成本 适用于多人开发 OMG,我无缺点 • 性能优越 适用于 • 大型样式表 • 制定样式规范 • 团队开发
  23. 23. SASS VS LESS• 实现原理不同• 创建变量的方式不同• 预编绎机制不同• 作用域表现不同• mixin 方式不同• SASS 比 LESS 的数学运算能力更强• LESS 没有 SASS 的 Control Directive
  24. 24. Hi,Let’s writing SASS  @知托付-颂赞
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×