Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SASS 让你更爽的 编写CSS

1,493 views

Published on

SASS 让你更爽的 编写CSS

Published in: Technology, Education
  • Be the first to comment

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

×