SASS 让你更爽的 编写CSS
Download as PPTX, PDF3 likes939 views
Sass 是一种 CSS 3 扩展，增加了变量、嵌套规则和混入等功能，使 CSS 更加灵活和有趣。它支持高级特性如控制指令和可定制输出，适合用于大型样式表和团队开发。相较于 Less，Sass 在数学运算能力和功能上更为强大。
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 @知托付-颂赞