SASS

用$作为变量前缀来声明，而且可以嵌套使用，中划线和下划线是同样的

$nav-color: #F90
nav
  $width: 100px
  width: $width
  color: $nav-color
  div
      width: $width

编译过来就是

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

nav div {
  width: 100px;
}

系不系很简单粗暴
接下来我们讲一下父选择器标签符&
如果我们想用伪类或者伪元素的时候呀，如果直接

 :hover
          width: $width;

我们会得到
 hover-width: 100px;

显然，这样是不行的，这是我们的&就派上用场了
我们可以在：hover前面加一个&

  &:hover
          width: $width
          height: 100px
就可以得到
nav div:hover {
  width: 100px;
  height: 100px;
}

这时候我们还有一个用法就是在选择器的最前面追加选择器

 body &:hover
          width: $width
          height: 100px
得到
body nav div:hover {
  width: 100px;
  height: 100px;
}

同样也有通过,形成的群组选择器供你选择，下面我们来示范一下一下通过,来多选子元素

div
    h1,h2,h3
        height: 200px
        span
            display: inline
得到
div h1, div h2, div h3 {
  height: 200px;
}

div h1 span, div h2 span, div h3 span {
  display: inline;
}

但是也正如你所看到的一样，写出来的css选择器代码将会非常非常的长
所以sass同样也引入了css3中的新选择器来减少代码的冗余度
首先是>,和css一样，是直接子选择器的意思，所以在写sass得到时候可以直接在前面加一个>就可以了
接下来的两个都是统计元素，写的时候要把前面和后面都写上
而+是紧跟在某选择器后的那一个元素
div+span：且在div后的第一个span被作用到
而~是紧跟在某选择器后的所有元素
div~span是指在div后面的所有span

div
    >h1,div+h2,h3~p
        height: 200px
        span
            display: inline
得到
div > h1, div div + h2, div h3 ~ p {
  height: 200px;
}

div > h1 span, div div + h2 span, div h3 ~ p span {
  display: inline;
}

sass还有一点就是可以把符合属性分开来写，比如

div
    border:
        width: 1px
        color: yellow
会编译成
div {
  border-width: 1px;
  border-color: yellow;
}

sass也支持导入文件，当我们构建一个比较大的项目的时候，可以创建一个main文件然后一个个的把代码引进来

先引进的就在前面
然后如果是局部文件只是用于别的文件引入的话，可以用开头命名。引入的时候会自动省略;

@import 'demo'//不用冒号和分号，而且不用下划线，文件名本身是有下划线的
同样的也可以局部引入，也可以引入原生css文件，不过需要加.css后缀

那么引入文件的时候碰到别人的变量和你的变量同名把你的覆盖了怎么办，这时候sass引入了权重的概念

$width:400px !default  //类似如css的！important

也提供了注释，就是我们平时用的

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

接下来我们讲下一个内容，混合器Mixin
就是预先写好公共的css样式，然后在内部直接引用

@mixin block
    display: block

div
    height: 100px
    @include block
得到

div {
  height: 100px;
  display: block;
}

更强大的是它还支持把选择器和属性同时放在里面

@mixin block
    display: block
    div
        background-color: #fff

div
    height: 100px
    @include block

得到
div {
  height: 100px;
  display: block;
}

div div {
  background-color: #fff;
}

说明以后可以把写好的样式，导航栏，进度条什么的写进混合器里，直接进入
还有它也可以传参数，想不到把。。。这下主题色想怎么变就怎么变了

@mixin block($color)
    display: block
    div
        background-color: $color

div
    height: 100px
    @include block(#666)
得到
div {
  height: 100px;
  display: block;
}

div div {
  background-color: #666;
}
/*# sourceMappingURL=a.css.map */

还有默认参数，只是用属性：属性值来表示，而不是像es6一样用=

div {
  height: 100px;
  display: block;
}

div div {
  background-color: #666;
}
/*# sourceMappingURL=a.css.map */

当第二个参数没有传进来的时候，它会默认等于第一个参数，或者直接默认等于red也是可以的
好啦接下来我们讲最后一点，继承，继承一般是比混合器更快的

span
    color: red
p
    @extend span
    height: 200px
得到
span, p {
  color: red;
}

p {
  height: 200px;
}

简答点来说，就是把继承的和被继承的提出来共同组成一个组，这样，仅仅只是增加了选择器的数据量，而不是增加属性的数据量，我个人是这么理解的，你知道它的含义你就知道什么时候用它最合适了
还有一个
@at-root,他就是把里面的属性提到最外面那一层去，就是有时候你要在里面在开始做动画，但是动画别的地方也要用，你一开没有想到，但是现在要提出去了，这时候它就派上用场了

div
    a
     @at-root
        .abc
            display: inline

得到
.abc {
  display: inline;
}
注意，这里是把里面的代码提取到最最外面