Your SlideShare is downloading. ×
  • Like
SASS 让你更爽的 编写CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SASS 让你更爽的 编写CSS

  • 1,087 views
Published

SASS 让你更爽的 编写CSS

SASS 让你更爽的 编写CSS

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,087
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Welcome to the SASS world 
  • 5. Install SASS$ gem install sass
  • 6. Variables从 $ 开始 $variables name : vaiables value; SCSS SASS
  • 7. Compile
  • 8. Compile
  • 9. NestedSCSS SASS CSS
  • 10. MixinsSCSS SASS CSS
  • 11. Selector InheritanceSCSS SASS CSS
  • 12. Reference Parent使用 & 语法糖引用父层
  • 13. Comments 双斜线注释将被忽略
  • 14. SASSScript Data Types
  • 15. SASSScript Operations
  • 16. SASSScript Operations
  • 17. SASSScriptOperation s-Color
  • 18. @importSASS 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  @知托付-颂赞