SCSS

SCSS 是 Sass 的一部分

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。 中文官网

Sass supports two different syntaxes.Each one can load the other.

上面是官网的介绍，Sass 支持两种不同的语法，分别是 SCSS 和 The Indented Syntax(缩进语法)，它们互相兼容。Sass 是完全支持 CSS的。SCSS 是 Sassy CSS 的意思。

为什么要使用 Sass ？它有哪些优点？

• Sass 完全支持 CSS ，并且提供更多的功能供开发使用。
• 可以减少重复书写 选择器 和 样式代码的工作，提高了样式代码的复用性。
• 样式代码结构更清晰了，提高了CSS样式代码的可读性和可维护性。

  安装 Sass

  安装 Sass 就使用 SCSS 语法写样式代码了，so，安装 Sass 就等于装了 SCSS 。安装教程。

Sass 提供的新特性和功能

目的在于掌握日常开发常用功能和避免在开发中踩坑，参考 Sass中文官网-快速入门 ，在自己的理解下编写更多的代码去验证，本文内的所有代码通过 Sass提供的转换工具 。

保持 sass 条理性和可读性的最基本的三个方法：嵌套、导入和注释。

1 变量

变量声明

sass变量的声明和css属性的声明很像。

• 变量名

变量名用 $ 开头标识。可以将反复使用的CSS属性值定义为变量，可重复使用，注意命名语义化。如 $highlight-color 应该说一切命名都应该具有语义化。

• 变量值

任何可以用作css属性值的值都可以用作Sass的变量值。

$basic-border: 1px solid black;
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

Sass的变量值 还可以是已经声明的变量。

// .scss 文件
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

// 生成的 .css 文件

.selected {
  border: 1px solid #F90;
}

变量引用

• 变量作用域

定义在CSS样式块或{...} 外的变量可以在整个样式表引用。
定义在CSS样式块或{...} 内的变量只能在块内使用，在样式表的其他地方定义和使用同名变量，不会对块内造成影响。

// .scss 文件
$nav-color: #F90;
$width: 10px;
nav {
  $width: 100px;     // 注意这是变量，不要和样式声明混淆了。
  width: $width;
  color: $nav-color;
  .image {
      width: $width;
  }
}

p {
    width: $width;
}

生成的 .css

nav {
  width: 100px;
  color: #F90;
}
nav .image {
  width: 100px;
}

p {
  width: 10px;
}

2 嵌套

[ 嵌套 ] 分为 [ 选择器嵌套 ] 和 [ 属性嵌套 ]。
[ 嵌套 ] 功能让我们减少重复书写选择器和属性，通过视觉上的缩进使得编写的样式代码结构更清晰，具有更高的可读性和开发友好性。
注意，[ 嵌套 ] 会随着 选择器变复杂 而变复杂，始终记得使用 Sass 是为了让书写样式变得更简单，如果工作变复杂了，反而要思考该不该使用了。
**

简单选择器嵌套

在规则块内嵌套 [ 规则块 ] 和 [ 样式声明 ]

// .scss 文件
#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

生成的 .css 文件

#content {
  background-color: #f5f5f5;
}
#content aside {
  background-color: #eee;
}

在 规则块内使用 & 引用父选择器

// .scss 文件

// 第1种
article a {
  color: blue;
  &:hover { color: red }
}

// 第2种：使用BEM命名类名
.mod-nav {
    border: 1px solid green;
    &__list-item {
        color: red;
    }
}

// 第3种 在父选择器前添加选择器 
#content aside {
  color: red;
  body.ie & { color: green }
}

// 生成的 .css 文件
// 1
article a {
  color: blue;
}
article a:hover {
  color: red;
}

// 2
.mod-nav {
  border: 1px solid green;
}
.mod-nav__list-item {
  color: red;
}

// 3
#content aside {
  color: red;
}
body.ie #content aside {
  color: green;
}

群组选择器的嵌套

群组选择器（并集选择器）是用 , 分隔的选择器列表。如 h1,h2,h3

// .scss 文件

// 第1种情况
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

// 第2种情况
nav, aside {
  a {color: blue}
}

生成的 css 文件

.container h1, .container h2, .container h3 {
  margin-bottom: 0.8em;
}

nav a, aside a {color: blue}

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。个人认位群组选择器嵌套层级太深，样式代码还是变复杂，开发中小心使用。

组合选择器的嵌套

子选择器 >
+ 相邻兄弟选择器
~ 同层兄弟选择器

// .scss file
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

生成的 css 文件

article ~ article {
  border-top: 1px dashed #ccc;
}
article > section {
  background: #eee;
}
article dl > dt {
  color: #333;
}
article dl > dd {
  color: #555;
}
nav + article {
  margin-top: 0;
}

CSS 属性的嵌套

CSS 有些属性是简写属性。嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

// .scss file

// 基础用法
nav {
  border: {
      style: solid;
      width: 1px;
      color: #ccc;
  }
}

生成的 .css file

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

还可以指明子属性例外情况

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

// 生成的 .css file 
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3 导入文件

当样式表变得越来越大的时候，仅仅使用[ 嵌套 ] 功能也很难保证样式代码结构清晰。有时，处理这种大量样式的唯一方法就是把它们拆分到多个文件中，然后在一个样式文件中统一引入。sass通过对css原生的@import命令进行改进直接支持了这一特性。

css 有一个特别不常用的功能，即@import命令，它允许在一个css文件中导入其他css文件。然而，在导入文件中只有执行到@import 命令时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

// .css file
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

sass 提供的 @import 命令用于在一个scss文件中导入其他scss文件。这个 scss 文件在生成 css 文件时就把相关文件导入进来，也就是说所有的样式代码被添加到了生成的css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。sass 的 @import 命令可以省略被导入文件的后缀。

// .scss file
@import "colors"  // @import "colors.scss"
@import "mixins"  // @import "mixins.scss"

// 在导入文件生成的 .css 文件中是看不到导入代码的

使用 sass 局部文件 作为导入文件

我们知道在编译时，sass 会将项目中的所有.scss文件生成 .css 文件，但是有些.scss文件的使命就是被另一个文件@import 导入的，不需要在编译时生成独立的.css文件，这样的.scss文件称为局部文件。显然，使用局部 sass 文件可以减少不必要的.css文件生成，这在将大量样式拆分成多个 .scss 文件时非常有用。

在实际开发中，我们最常编写的是被导入的 .scss 文件，然后再集中导入到一个文件中。
**
sass 局部文件的文件名以下划线开头。这样，sass在编译时就不会单独编译这个文件输出css，而只把这个文件用作导入。

@import "themes/_night-sky.scss"

// 引入时还可以省略下划线

@import "themes/night-sky.scss"

变量默认值 !default

在变量属性值中使用!default 标识可以声明变量的默认值，如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值，它与声明赋值的前后顺序无关。下面通过例子理解。

// colors.scss
$link-color: red;

// mod-nav.scss

$link-color: blue;
@import "colors"  
a {
    color: $link-color;
}

生成的 .css file

a {
  color: red;
}

上面的代码中的结果并不是我们想要的，我们在 mod-nav.scss 文件中声明并赋值变量$link-color ，在样式表后面又导入了colors.scss 文件，导入文件中也声明并赋值变量$link-color，这时后面导入的变量值会覆盖前面变量值，这并不是我们想要的，而且很可能在我们没有察觉的情况下就造成变量值覆盖。为了解决这个问题，sass提供了[ 变量默认值 ]。

通过上面的例子我们已经明白了何时使用变量默认值。现在总结一下，变量默认值一般用于基础样式库sass文件中，这些文件可以被其他文件导入，当导入者需要定制修改sass库文件中的某些变量值时，就重新声明这个变量并赋值，变量值使用!default 标识。没有被修改的变量就使用默认值。

$link-color: blue;
$link-color: red !default;
a {
    color: $link-color;
}
// 编译后 .css
a {
    color: blue;
}

在规则块内嵌套导入 sass 文件

跟原生的css不同，sass允许@import命令写在css规则块内。这种导入方式下，生成对应的css文件时，局部文件里的样式代码会被直接插入到css规则块内导入它的地方。下面举例说明。

// _blue-theme.scss
aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被导入的局部文件中定义的所有变量和混合器，也会在这个规则块范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入，只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
有时，可用CSS原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。

使用CSS原生的@import

Sass 兼容 CSS，因此在 Sass 文件中是可以写 CSS 的 @import 命令，但是Sass 在编译文件时遇到@import 命令会尝试找到对应的sass文件并导入进来，如果你在 Sass 文件中书写出现以下几种情况，那么编译生成的 CSS 文件中生成 CSS 原生的@import 命令，后面浏览器去解析 [ 这个生成的CSS 文件 ] 时，会额外下载文件里导入的 其他CSS 文件，最终导致页面加载变慢。

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

下面通过一个例子来说明。

// .scss 文件
@import "colors.css"; // sass 的 @import 命令

.mod-nav {
    color: red;
}

// 编译后的 .css 文件
@import "colors.css"; // css 原生的 @import 命令，后面浏览器解析时会额外下载 colors.css

.mod-nav {
    color: red;
}

如果我们真的需要在 Sass 文件中导入一个 CSS 文件，应该将 CSS 文件改为 .scss 后再通过 @import 导入。

4 静默注释

注释的作用是帮助作者组织样式和记录书写过程中的想法。以后你看自己的代码时明白为什么这样写，以及简单的样式说明。静默注释功能可以让我们的注释不被别人看到。

CSS标注注释/* ... */，注释内容会保留在生成的CSS文件中，可以被查看网页源码的所有人看到。
Sass的静默注释 // 不会保留在生成的CSS文件中。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

现在，我们已经了解了保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释。

5 混合器

Sass 的混合器（@mixin）可以实现大段样式代码的重用。首先将样式表中的重复样式抽象出来定义一个混合器，再在规则块内通过@include 引用这个混合器来共享样式。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

语法：@mixin mixin-name { /* ... */ }

混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

何时使用混合器

利用混合器可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。
混合器在某些方面跟 CSS [类名]很像，都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在 HTML 文件中应用的，而混合器是在样式表中应用的**。这就意味着类名具有语义化含义，用来[ 描述元素的含义 ] 。而混合器是 [ 描述元素的外观 ]，用来描述一条css规则应用之后会产生怎样的效果。

.notice是一个有语义的类名。如果一个HTML元素有一个notice的类名，就表明了这个HTML元素的用途是向用户展示提醒信息。rounded-corners混合器是描述元素外观的，它描述了混合器块内的css规则最终的视觉效果-边框角。

混合器和类配合使用写出整洁的html和css，因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性，在写样式的过程中一定要铭记二者的区别。

混合器的内容

混合器块内可以放 [ 样式属性 ] 和 [ 规则 ] 。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}

// 编译后
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

给混合器传参

给混合器传参来定制混合器样式。

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

// 编译后
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}

通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可。

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

当参数不需要定制时，声明混合器时可以给参数赋默认值。参数使用$name: default-value的指定默认值，参数可以看作一个变量，所有变量值都可以是默认值。

@mixin link-colors($normal, $hover: $normal, $visited: $normal) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue);
}
// 编译后
a {
  color: blue;
}
a:hover {
  color: blue;
}
a:visited {
  color: blue;
}

[ 混合器 ] 用于样式效果的重用，如果想重用语义化的类，就得使用 [ 继承 ] 功能去继承选择器。在实际开发中一定要注意区别。

6 选择器继承

继承也是为了减少重复。注意继承和混合器的区别，继承是复制选择器，生成的 CSS 文件体积不会变很大，混合器是复制样式代码，生成的 CSS 文件体积可能变很大。

基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。在规则块内通过@extend: 简单选择器;语法实现。

先看下面这个简单例子

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error; //通过选择器继承样式
  border-width: 3px;
}

// 编译后
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

上面继承选择器和被继承的选择器都是简单选择器，继承规则很容易理解。但是，在实际开发中 .error 在样式表其他地方可能会和其他选择构成组合选择器使用，这时， .seriousError不仅会继承.error自身的所有样式，任何 [ 跟 .error有关的组合选择器样式 ]也会被.seriousError以组合选择器的形式继承。看下面的例子说明。

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

编译生成的 CSS 文件

.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

.error a, .seriousError a {
  color: red;
  font-weight: 100;
}

h1.error, h1.seriousError {
  font-size: 1.2rem;
}

这可能并不是我们想要的，.seriousError a 和 h1.seriousError 选择器可能根本就不存在，或者存在这样的选择器但是有样式覆盖的风险。这就是继承的坑了，本人称之为 选择器继承的连锁反应。

何时使用继承

始终记得 混合器用来共享相同的样式效果，继承是基于 CSS 类名的，用来继承一个选择器所有样式，继承与被继承的选择器之间并不是恰好有相同样式。

想象一下你正在编写一个页面，给元素添加类名，你发现你的某个类（比如说.seriousError）是另一个类（比如说.error）的细化。你会怎么做？

• 你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用sass时，我们提倡的就是不要做重复的工作。
• 你可以使用一个选择器组（比如说.error, .seriousError）给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。
• 你可以使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。
• 综上所述你应该使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error，.seriousError都会继承其中的样式。

继承的高级用法

任何规则都可以继承其它规则，大部分规则也可以被其它规则继承。

假如一条样式规则继承了一个复杂的选择器，那么它只会继承[ 这个复杂选择器命中的元素 ]所应用的样式。下面举例说明。

.error {
  border: 1px solid red;
  background-color: #fdd;
}

.error.important {
  color: red;
  font-weight: 100;
}

.seriousError {
  @extend .error.important; // 继承复杂选择器
  border-width: 3px;
}

// 编译后
.error {
  border: 1px solid #f00;
  background-color: #fdd;
}
.error.important,.seriousError { // 群组选择器
  color: #f00;
  font-weight: 100;
}
.seriousError {
  border-width: 3px;
}

又比如

.error {
  border: 1px solid #f00;
  background-color: #fdd;
}

#main .seriousError {
    color: red;
    @extend .error;
}

// 编译后生成
.error, #main .seriousError {
  border: 1px solid #f00;
  background-color: #fdd;
}
#main .seriousError {
  color: #f00;
}

注意，像#main .error这种选择器序列是不能被继承的。

继承的工作细节

跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码那么简单。为了不让你对生成的css感觉奇怪，对这背后的工作原理有一定了解是非常重要的。 @extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error, .seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error 、.error a或者#main .sidebar input.error[type="text"]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。
关于@extend有两个要点你应该知道。

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

使用继承的最佳实践

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制，很危险。

避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则**。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控。

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

// 编译后
.bip .baz,
.bip .foo .bar,
.foo .bip .bar {
  a: b;
}

在上边的例子中，sass必须保证应用到.baz 元素的样式同时也要应用到.foo .bar（位于class="foo"的元素内的class="bar"的元素）。例子中有一条应用到.bip .baz（位于class="bip"的元素内的class="baz"的元素）的css规则。当这条规则应用到.foo .bar时，可能存在三种情况，如下代码:

<!-- 继承可能迅速变复杂 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>

上面这个例子是真不好理解，我只知道，继承一不小心使用，就会造成灾难！
为了应付这些情况，sass必须生成三种选择器组合（仅仅是.bip .foo .bar不能覆盖所有情况）。如果任何一条规则里边的后代选择器再长一点，sass需要考虑的情况就会更多。实际上sass并不总是会生成所有可能的选择器组合，即使是这样，选择器的个数依然可能会变得相当大，所以如果允许，尽可能避免这种用法。

值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，如下：

.bip .baz .aoo .boo{ 
  color: red;
}
.foo.bar {
  @extend .aoo;
}

// 编译后
.bip .baz .aoo .boo,
.bip .baz .foo.bar .boo {
  color: red;
}

但有一个前提就是，不要用后代选择器去继承CSS规则。

7 函数

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用。函数内部可以含有多条语句，需要调用@return 输出结果。

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
// 调用函数
#sidebar { width: grid-width(5); }

// 编译后
#sidebar { width: 240px; }

上面代码中调用函数还可以这样写，#sidebar { width: grid-width($n: 5); } 。
建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
可以发现自定义函数和混合器语法很像。

小结

本文介绍了 sass 最基本部分,你可以轻松地使用 sass 编写结构清晰、无冗余、语义化的css。对于sass提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。

变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。

变量、混合器的命名甚至sass的文件名，可以互换通用_和-。

同样基础的是sass的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。

通过导入样式文件可以把分散在多个sass文件中的内容合并到一个文件内，编译生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。

混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的css变得更加可维护和语义化。

最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。