sass为后缀的文件：写的时候不带大括号和分号；
例子：body
font-size：12px
scss为后缀的文件：和css一样写的时候带大括号和分号；
导入：
sass的导入（@import）规则和css的有所不同，编译时会将@import的scss文件合并进来只生成一个css文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通的css导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import 'mixin'
注释：
/**/:多行注释
//:单行注释，在转义成css的时候不会被转义出来
变量：
声明变量的依据：
- 该值至少重复出现了两次；
- 该值至少可能会被更新一次；
- 该值所有的表现都与变量有关（非巧合）。
$fontS:12px !default;(!default表示默认值，不是可以不写)
覆盖默认变量要在默认变量之前声明
$fontS:14px;
$fontS:12px !default;
全局变量：在选择器，函数，混合宏等外面定义的变量为全局变量
$font:12px;//全局变量
.em{
$font：15px;//在局部内覆盖全局变量
a{
color:$color;
}
}
全局变量的影子：当在局部范围声明一个已经存在于全局范围内的变量时，局部变量就会成为全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量
$font:12px;//全局变量
.em{
$font;//局部变量
a{
color:$color;
}
}
scss命令编译：
例子：将reset.scss编译放在css文件夹下的reset.css
sass -- watch
sass/reset.scss:css/reset.css
scss代码输出风格：
1.嵌套输出方式 nested;(--style nested)
2.展开输出方式expanded; 语法（sass -- watch test.scss:test.css --style expaned)
3.紧凑输出方式compact；(--style compact)
4压缩输出方式compressed(--style compressed)
scss的调试: scss --watch --scss --sourcemap style.css
sass嵌套：
- 选择器嵌套
例子：
<header><nav><a></a></nav></header>
nav{
a{
color:red;
header & {
color:green;
}
}
}
- 属性嵌套
.box{
font:{
size:12px;
weight:bold;
}
}
- 伪类嵌套
.box{
&:before {
content:"伪元素嵌套";
}
}
混合宏：声明混合宏的关键字（@mixin）
不带参数的混合宏：
@mixin borders{ //borders是宏的名字
-webkit-border-radius:5px;
border-radius:5px;
}
调用：
button{
@include borders
}
带参数混合宏：
@mixin borders($radius:5px){
-webkit-border-radius:$radius;
border-radius:$radius;
}
复杂的混合宏：
@mixin box-shadow($shadow...){ //多个参数用...来代替
@if length($shadow)>=1{
@include prefixer(box-shadow,$shadow);
}@else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow,$shadow)
}
}