sass语法
文件后缀名
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1//文件后缀名为scss的语法,
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}区别： scss后缀名文件跟css语法差别不大，sass后缀名文件则不使用大括号跟分号
导入
sass用 ` @import “文件名” `，规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件 。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。
_a.scss
body {
background: #eee;
}需要导入样式的sass文件b.scss：
@import "a";
p{
background: #0982c1;
}编译后的b.css
body {
background: #eee;
}
p{
background: #0982c1;
}注释
sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。
变量
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号:分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值,!global则表示全局变量。
**一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 **
$borderDirection: top !default;
/* scss */
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
/*输出 css*/
.border-top{
border-top:1px solid #ccc;
}map数组
定义
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);使用
/* scss */
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
/* 输出 css */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}嵌套
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套，属性的嵌套用的比较少，
在选择器嵌套中，可以使用
&表示父元素选择器
@at-rootsass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
/* 不跳出嵌套 */
.partent{
color: #ff0000;
.child{
width:100px;
}
}
//输出css
.parent {
color: #ff0000;
}
.parent .child {
width: 100px;
}
---
/* 跳出单个选择器 */
.partent{
color: #ff0000;
@at-root .child{
width:100px;
}
}
//输出css
.parent {
color: #ff0000;
}
.child {
width: 100px;
}
---
/* 跳出多个选择器 */
.partent{
color: #ff0000;
@at-root {
.child-1 {
width:100px;
}
.child-2{
width:50px;
}
}
}
//输出css
.parent {
color: #ff0000;
}
.child-1 {
width: 100px;
}
.child-2 {
width: 50px;
}混合（minxin）
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明@mixin通过@include来调用。