scss

SASS 是一款 CSS 预编译器
Scss 其实是 Sass 3 为了兼容 CSS 引入的新语法。
最早的 Sass 语法格式，被称为 缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速，比如上面这段样式用sass的语法可以这样写：

#sidebar
  width: 30%
  background-color: #faa

Sass和Scss的大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。 比如上面这段样式用Scss的语法写的话看起来和CSS的写法是一样的：

#sidebar {
  width: 30%;
  background-color: #faa;
}

变量
SassScript 最普遍的用法就是变量，变量以美元符号”$”开头，赋值方法与 CSS 属性的写法一样：

$width: 10px;

使用变量：

#main {
  width: $width;
}

如果变量类型为字符串，一般不需要加引号，但是有些特殊情况，比如字符串中有双斜杠“//”，就需要用英文输入法状态下的单引号或者双引号包裹字符串，用引号的写法：
因为在Sass中双斜杠表示单行注释。

除了简单的赋值，Sass中变量还可以定义类似数组的变量：

$animals: puppy kitty chick;

简单计算

$width: 10px;

#main {
  width: $width / 2;
  height: $width * 2;
}

插值法

$name: "mail";
$top-or-bottom: "top";
$left-or-right: "left";

.icon-#{$name} {
  background-image: url("/icons/#{$name}.svg");
  position: absolute;
  #{$top-or-bottom}: 0;
  #{$left-or-right}: 0;
}

嵌套
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，比如：

父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器，比如：


复用：mixin/include

<div class="user-avatar square">...</div>
<div class="admin-avatar square">...</div>

过去，在css中我们可以通过复用类名，来实现代码的复用：

.square {
  width: 100px;
  height: 100px;
}

现在，我们试着用Sass 的mixin/include来解决复用问题：

@mixin square {
  width: 100px;
  height: 100px;
}

// 应用：
.user-avatar {
  @include square;
}
.admin-avatar {
  @include square;
}

有参数混合

@mixin square($size) {
  width: $size;
  height: $size;
}

// 应用
.avatar {
  @include square(100px);
}

参数有默认值

@mixin square($size: 100px) {
  width: $size;
  height: $size;
}

// 不传参数就会使用默认的值 100px
.avatar {
  @include square;
}

// 传入参数就会使用传入的值 200px
.avatar-200 {
  @include square($size: 200px);
}