Sass--对css的扩展。

sass具有css不具备的新特性。可以更好的维护样式，改动更简单。
Sass完全兼容css，因为他是一个预处理器，用Sass写的代码会转换为标准的css。在cass可以使用变量，嵌套，导入等，保持大型样式结构良好。
sass有两种语法：第一是 SCSS,是 CSS的扩充版本，文件可以以.scss为扩展名。 
               第二是 古老语法（缩排语法，简称’sass‘），它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，它也不使用分号，而是用换行符来分隔属性。此种语法的样式表文件需要以 .sass 作为扩展名。

1.Sass嵌套css

div{
  background-color: green;
}
div ul {
  list-style: none;
}
div ul li {
  display: inline-block;
}
改为
div{
  background-color: green;
  ul {
   	list-style: none;
   	li {
  	   display: inline-block;
     }
  }
}

2.用 Mixins 创建可重用 CSS，mixin是一组css声明，可以重复使用。需要时间适配，才可适用所有浏览器，浏览器不断更新，我们在用时需要添加浏览器前缀，

div {
  -webkit-box-shadow: 0px 4px 4px #fff;
  -moz-box-shadow: 0px 4px 4px #fff;
  -ms-box-shadow: 0px 4px 4px #fff;
  box-shadow: 0px 4px 4px #fff;
}
mixins 就像css函数。以@mixin开头，后跟自定义名称。参数（$x，$y，$blur，以及上例中的$c是可选的。
**注意实参必须要带$符号。**
在需要的地方使用@include调用上面定义的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);
}

3.使用@if @else为样式添加逻辑。

  @mixin border-stroke($val){
	  @if $val==light{border:1px solid black}
	  @else if $val==medium{border:3px solid black} 
	  @else if $val==heavy {border:6px solid black} 
	  @else {border:no border} 
  }
  div {
    width: 50px;
    height: 50px;
    background-color: green;
    @include border-stroke(heavy );
  } 

4.使用 @for 创建一个 Sass 循环

<style type='text/sass'>
$j  就是变量1-3，class类名通过#{$j}来表示。
  @for $j from 1 through 3 {
    .text-#{$j}{font-size:2px+10px*$j}
  }
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>

@for指令如何使用起始值和结束值循环一定次数。Sass 还提供@each指令，该指令循环遍历列表或映射中的每个项目。

5.使用 @each 遍历列表中的项目

<style type='text/sass'>
$key 代表变量 blue black red
  @each $key in blue ,black,red {
    .#{$key}-bg{background-color:$key}
  }
  div {
    height: 20px;
    width: 20px;
  }
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

6.使用 @while 当条件满足时样式生效

<style type='text/sass'>
  $x:1;
  @while $x<4{
    .text-#{$x}{font-size:2px+10px*$x}
    $x:$x+1;
  }
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>

6.用 Partials 将你的样式分成小块

Sass 中的Partials是包含 CSS 代码段的单独文件 .
partials的名称以下划线（_）字符开头，告诉 Sass 它是 CSS 的一小部分，而不是将其转换为 CSS 文件。
此外，Sass 文件以.scss文件扩展名结尾。要将partial中的代码放入另一个 Sass 文件中，请使用@import指令。
将名为_variables.scss的partial导入 main.scss 文件。import语句中不需要下划线——Sass 知道它是partial
@import 'variables'

7.将一组CSS样式扩展到另一个元素
Sass 有一个名为extend的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。

.box{
  background-color: black;
  height: 7px;
  border: 2px solid red;
}
.big-box{
  @extend .box;//继承box的样式。
  width: 15px;
  font-size: 2px;
}