ScssSass有两种 sass和scss。二者差异比较小，SCSS是在CSS3的基础上做拓展，而SASS是一种简化格式

Sass有两种 sass和scss。二者差异比较小，SCSS是在CSS3的基础上做拓展，而SASS是一种简化格式，用缩进代替{}，用换行代替分号等，这里统一使用scss。

特点：

完全兼容CSS3；
在CSS基础上增加变量、嵌套、混合等功能；
有函数进行运算

嵌套

Sass允许CSS里进行嵌套，内层样式将他的外层的选择器作为父选择器；

在内层中可以使用&来代替嵌套规则外的父选择器。多层嵌套时，最外层的父选择器会一步一步往下传递；

&后也可以接其他字符生成符合的选择器；

某些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译为：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

变量$

可以像js里一样定义变量，然后在属性里使用。

如：$width；5px;
使用：
#main{
    width:$width;
}

其他

Scss里支持算法运算，()等

@-Rules 和指令

sass支持所有的CSS3的@功能。

@import 导入

Sass拓展了CS是的@ipmort功能，被导入的文件中包含的变量和指定都可以在导入的文件中使用。

通常 @import会寻找并导入scss文件，但在以下情况下，@import仅作为普通的CSS语句，不会导入Sass。

文件类型为css
以http://开头；
以url();
@import中包含media queries；

若需要导入scss文件，但又不希望将其编译为css，可以在文件名前加下划线，但是在导入语句中却不需要加下划线。ps：不能同时存在_A.scss和A.scss这样的同名文件，存在时_A将被忽略

@media

与CSS类似，这里只是允许其在CSS规则中嵌套。

@extend

若一个元素的样式与另一个的完全一样，但是又新增了额外样式，这样就可以使用extend。

可以允许一个元素继承多个元素的样式，同名的样式，后面的覆盖前面的；

@mixin

与extend类似，都是一种简化代码，重复使用的指令。

@mixin 定义一段样式，@include则可以引用@mixin定义的样式。

//定义 $color 为参数,:green为参数默认值，当没有参数的时候改设置生效，其他的与下文的函数指令一样
@mixin btn($color:green){
    color:$color;
    font-size:20px;
}
//使用
.page{
    @include btn(blue);
}

与extend类似，也可以多次引用mixin。

mixin里可以带参数，而extend不行。

函数指令

Sass 支持自定义函数。

@function grid-width($n：1) { //@function 修饰变量，证明这是一个方法；若调用时没有入参，则使用默认值
  @return $n*5+'px';  //@return 修饰返回值
}

#sidebar { width: grid-width(5); } //使用函数
#sidebar { width: grid-width($n：5); } //和上面的效果完全一样，下面的使用关键字参数，只要参数名一样，无论顺序如何都能对应上。

其他指令

略