Sass 语法规则
首先，sass和scss使用同一种语法，但是写法有所不同。
sass在编写的时候不适用' { '和' } '来包括，每一句的末尾也不可以用' ; '来结束。
而scss则完全可以按照css的写法编写，本篇基本使用sass的写法。
1 变量
1-1 变量声明
在sass中可以使用$来定义变量
//变量定义
$font-color: #333
$highlight-color: #F90
//变量引用
header
$width: 100px
width: $width
color: $font-color在sass中，中划线和下划线都可以使用，如：$link-color: blur
a
color: $link_color
2 嵌套
2-1 基本嵌套
在sass中，需要在在父级中写入很多子级的不同属性，可以使用嵌套。
嵌套在sass中显示可能看不明白，本节附带scss语句。// sass 语句
.contanin
article
h1 color: #333
p margin-bottom: 1.4rem
aside
background-color: #abc
// scss 语句
.contanin {
article {
h1 { color: #333 }
p { margin-bottom: 1.4rem }
}
aside {
background-color: #abc
}
}
// 编译后
.contanin article h1 { color: #333 }
.contanin article p { margin-bottom: 1.4rem }
.contanin aside { background-color: #abc }2-2 父选择器的标识符：&
当想要通过嵌套给父级元素设置伪类事件时，如果我们这样写：// scss语句
article a {
color: blue;
:hover { color: red }
}这样的结果是给article中a链接的所有后代添加了hover事件，这肯定不是我们想要的结果；这时可以使用 & 来获取父级，如：// scss语句
article a {
color: blue;
&:hover { color: red }
}这样就可以实现给article中的a链接设置hover事件
还有一种情况，需要给父选择器之前添加选择器时，可以直接在 & 前面加上选择器，如// scss语句
#content aside {
color: red;
.main & { color: green }
}
// 编译后
#content aside {color: red};
.main #content aside { color: green }2-3 群组选择器的嵌套
// sass语句
.container
h1, h2, h3
margin-bottom: .8em
// 编译后
.container h1, .container h2, .container h3 {
margin-bottom: .8em
}2-4 多种选择器：> 、+ 、~
> :子代选择器，可以选择一个元素的子元素，而不是后代元素
+ :同层相邻选择器，可以获取一个元素后紧跟的一个元素
~ :同层全体组合选择器，可以获取一个元素同层的所有所选元素
2-5 嵌套属性
// sass语句
nav
border:
style: solid
width: 1px
color: #ccc
// 编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}感觉并不是很实用，像border,background,translate这些完全可以将所有属性以此写在后面。。
3 导入sass
在sass中可以通过@import "reset"来导入reset.sass文件
3-1 用sass中的部分文件
在sass中有些sass文件你可能并不想将其转化成css文件，只是为了用于其他地方导入，这时你就可以通过在文件名的前面加一个下划线_来标记。而且导入的时候可以省略下划线。
如：想导入_reset.sass文件时，可以在想要导入的位置写@import "reset";并且导入的文件种的变量都可以被使用。3-2 默认变量值
通常在预设样式中都可以使用!default来设置默认样式，但是!default用于变量，含义：如果这个扁郎被声明赋值了，那就用它声明的值，否则就用这个默认值。// sass语句
$color: #333 !default3-3 嵌套导入
导入一个sass的局部文件，也可以嵌套在一个选择器中导入，如// sass语句
.aside
@import "reset"这样的导入，reset.sass中的变量的作用域就只有在.aside中才有效。
4 混合器mixin
4-1 混合器的定义与调用
混合器通俗来说就是将一大段样式赋予一个名字，需要的时候只需调用这个名字即可（用于浏览器兼容处理上很方便）// sass语句
// 定义
@mixin rounded-corners
-moz-border-radius: 5px
-webkit-border-radius: 5px
border-radius: 5px
// 调用
notice
background-color: green
border: 2px solid #00aa00
@include rounded-corners
4-2 混合器中的css规则
混合器中同样可以包含选择器和选择器中的属性。
混合器中也可以使用sass的父选择器标识符&。
如果一个混合器只包含css规则，不包含属性，那么该混合器就可以在文档的顶部调用，用于全局。
4-3 混合器传参
可以看出，混合器和函数很像，需要定义，也可以调用，现在又说可以传参！！// sass语句
// 混合器定义
@mixin link-colors($normal, $hover, $visited)
color: $normal
&:hover
color: $hover
&:visited
color: $visited
// 混合器调用
a
@include link-colors(blue, red, green)
// 编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }5 选择器继承
5-1 选择器继承
// sass语句
.error
border: 1px solid red
background-color: #fdd
.seriousError
@extend .error
border-width: 3px这样.seriousError就有了.error的所有属性
5-2 组合选择器的继承
// sass语句
//应用到.seriousError a
.error a
color: red
font-weight: 100
//应用到hl.seriousError
h1.error
font-size: 1.2rem
.seriousError
@extend .error
border-width: 3px.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
6 注释
在css中，我们通常是用/ ... /来注释，这样的注释被解析出来还会出现在css文件中。在sass中，可以使用 // 开头的注释来进行静默注释，这样的注释内容不会出现在生成的css文件中。
