SASS 让你更爽的 编写CSS
- 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. Features 1、Fully CSS3-compatible 2、Language extensions such as variables, nesting, and mixins 3、Many useful functions for manipulating colors and other values 4、Advanced features like control directives for libraries 5、Well-formatted, customizable output 6、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. Nested SCSS SASS CSS
- 10. Mixins SCSS SASS CSS
- 11. Selector Inheritance SCSS SASS CSS
- 12. Reference Parent 使用 & 语法糖引用父层
- 13. Comments 双斜线注释将被忽略
- 18. @import SASS 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 ? @知托付-颂赞