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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SASS 让你更爽的 编写CSS

1,112

Published on

SASS 让你更爽的 编写CSS

SASS 让你更爽的 编写CSS

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

No Downloads
Views
Total Views
1,112
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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  @知托付-颂赞

×