Scss

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); } //和上面的效果彻底同样，下面的使用关键字参数，只要参数名同样，不管顺序如何都能对应上。复制代码

其余指令

略