SASS 让你更爽的 编写CSS

  • 1,066 views
Uploaded on

SASS 让你更爽的 编写CSS

SASS 让你更爽的 编写CSS

More 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,066
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
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  @知托付-颂赞