参考：

中文文档：http://www.css88.com/doc/sass/
官方网站：https://sass-lang.com/
Freecodecamp: https://learn.freecodecamp.org/front-end-libraries/sass

一， 简介

CSS不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
有人就开始为CSS加入编程元素，这被叫做”CSS预处理器”（css preprocessor）。
它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
sass可以让你使用一些css本身没有的东西，比如变量、嵌套、混合、继承和一些其他特别的特性，让使用css变得更加得心应手。
熟悉sass后会发现它的功能特别强大，可以批量产生CSS语句，可以称为 CSS 生产工厂。
SASS本身的功能点不是特别多，理解起来也不难，但是要熟练使用不是特别容易，它不仅仅需要知道语法，更重要的是一种结构化的思想。
如果结构化构建批量的CSS语句，只有有了这个架构，才能够轻松地使用SASS。

二， 安装使用

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
　　gem install sass
然后，就可以使用了。
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
　　sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
　　sass test.scss test.css
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。

三， 功能点

第一， 变量
例如：

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

第二， 嵌套nest
例如：

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}
可以写成：
nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

注意，它只反映的是Html 中元素的嵌套关系

第三， Mixin-函数
例如：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}
第四，	@if, @else if, @else  
@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

第五， @for, @each, @while
例如：

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
生成：
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
A map has slightly different syntax. Here's an example:
$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
生成
.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

第六， 继承extend
例如：

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

不仅可以添加，还可以覆盖。

第七， Partials
相当于module的概念，在命名时要以 _ 作为前缀，用.scss作为后缀，用来标明是partials，
使用@import引用

// In the main.scss file use _mixins.scss partials

@import 'mixins'