颂赞http://qiqicartoon.com

What is SASS?

SASS 是一个 CSS3 扩展，为 CSS 扩展了嵌套规则、变量、混入、继承、函数等强大的功能。 SASS 的使命是让 CSS 更有趣味

• CSS 超集• CSS3 扩展• 使 CSS 更有趣• SCSS and SASS• Hampton Catlin、 Nathan Weizenbaum、 Chris Eppstein

http://sass-lang.com/

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

Welcome to the SASS world

Install SASS

$ gem install sass

Variables从 $ 开始 $variables name : vaiables value;

SCSS SASS

Compile

Compile

NestedSCSS SASS CSS

MixinsSCSS SASS CSS

Selector InheritanceSCSS SASS CSS

Reference Parent 使用 & 语法糖引用父层

Comments双斜线注释将被忽略

SASSScript Data Types

SASSScript Operations

SASSScript Operations

SASSScript Operation

s-Color

@import

SASS CSS

• @import “common.css”;• @import “common” screen;• @import http://alipay.com/common.css;• @import url();

• @import “common.scss/sass”;• @import “common”;

@media

Control Directives• @if• @while• @for• @each

@function

回过头来再看 SASS

• 大型样式表• 制定样式规范• 团队开发

优点 缺点

适用于

• 学习成本低• 降低样式表维护成本• 适用于多人开发• 性能优越

OMG ，我无缺点

SASS VS LESS

• 实现原理不同• 创建变量的方式不同• 预编绎机制不同• 作用域表现不同• mixin 方式不同• SASS 比 LESS 的数学运算能力更强• LESS 没有 SASS 的 Control Directive

Hi,Let’s writing SASS

@知托付-颂赞