SASS

Sass 是对于CSS的拓展，包含了两种不同的语法： 最新的SCSS和旧版的SASS。
全称是Syntactically Awesome StyleSheet。

Preprocessing

根据我的理解，SASS是把CSS中一些定义起来比较麻烦的属性抽象出来。开发人员可以使用更容易理解和读懂的代码来编写CSS样式。最后这些SACC样式都会被转译成标准的CSS样式。

Variables

在SASS当中可以定义变量，以便于重复使用。
SCSS:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

转译成CSS就是：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

在编写html的时候，元素都是可以嵌套的，但是标准的CSS样式是不可以嵌套的。但是在SCSS语法当中，你可以使用嵌套的样式定义。
SCSS:

SCSS SYNTAX
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

转译成CSS就是：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Partials

其实这个功能应该属于模块化里的一部分，也就是说你可以把样式中重复使用的那部分提取出来，放在一个SCSS文件里。这个文件可以被其他的SCSS文件导入和使用。一般Partials文件都是以下划线开始的，例如_partial.scss。这样SASS就知道这是一个Partial文件，不会把它转译成CSS了。

Modules

你可以导入其他SCSS文件中定义的变量或者样式模块。
例如，在base.scss：

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

如果想在其他文件中使用，就可以使用 @import：

@import '@styles/base.scss';

main {
  color: $primary-color;
}

最终会转译成CSS:

main {
  color: #333;
}

Mixins

有时候，样式中的一些部分会被重复定义，这时候如果能用生成函数来产生这些高度重用的样式模块的话，就很方便了。SASS就提供了这样的功能。你可以定义一个Mixins函数，来返回重用的样式，还可以接受参数。
SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

转译成CSS:

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance

例如，你的工程中有许多提示文本，错误、提醒和成功信息。这些文本可能就是颜色不同，但是字体和字号都是一样的。它们都可以继承与同一个文本基类。于是在SCSS中，我们就可以这么写：

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

转译成CSS就是：

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

在SCSS中可以对数值进行计算，这是CSS无法做到的。
SCSS:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

转译成CSS就是：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}