Sass语法
本篇文章主要介绍最基础的使用和语法，可以看到，Scss引入的变量和嵌套，极大地方便了开发工作，结合其自带的插值表达式，使得css样式编写非常灵活！
Sass语法介绍
sass有两种语法格式Sass(早期的缩进格式：Indented Sass)和SCSS(Sassy CSS)
目前最常用的是SCSS，任何css文件将后缀改为scss，都可以直接使用Sassy CSS语法编写。
所有有效的 CSS 也同样都是有效的 SCSS。
使用变量
sass使用$符号来标识变量。
变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。
比如存储颜色(color)、字体集，或任何你想重用的CSS值。
1. 变量声明
和css属性的声明（property declaration）很像！
如，声明值为 #F90 的变量 $highlight-color，字体集变量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
body {
font: 100% $font-stack;
color: $highlight-color;
}
输出结果为：
body {
font: 100% Helvetica, sans-serif;
color: #F90;
}
变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。
2. 变量引用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。
css生成时，变量会被它们的值所替代。

$color:#A34554;
.box {
width: 300px;
height: 400px;
&-left{
width: 30%;
color: $color;
}
}
生成css为：

.box {
width: 300px;
height: 400px;
}
.box-left{
width: 30%;
color: #A34554;
}
声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
3. 变量名中的中横线(hyphen)和下划线(underscore)
sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。
也就是，变量名中的中横线和下划线没有区别，两者互通。
比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。

$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
相对，使用中横线更普遍些！
嵌套（Nesting）
css中重复写选择器是非常恼人的。尤其是嵌套的html元素样式，如：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
Scss的嵌套
Sass中，借助在规则块中嵌套子规则块，可以使重复选择器只写一遍，避免重复而且可读性更高。
比如上面的示例，借助scss嵌套：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。
父选择器的标识符&
通常，sass解析嵌套时，把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside），即生成后代选择器。
但是对于伪类:hover、对于多class名等情况，则不应该以"后代选择器"的方式连接，比如：
article a {
color: blue;
:hover { color: red }
}
默认生成的article a :hover会让article元素内a链接的所有子元素在被hover时都会变成红色，显然是不正确的（应该应用到a自身）。
为此sass提供了一种特殊的选择器：父选择器&。它可以更好的控制嵌套规则！
只要是选择器可以放置的地方，就都可以在嵌套中同样使用&。
article a {
color: blue;
&:hover { color: red }
}
展开时，&被父选择器直接替换：
1
2
article a { color: blue }
article a:hover { color: red }
通过&可以在嵌套块内，实现在父选择器之前添加选择器（非常灵活）。
#content aside {
color: red;
body.ie & { color: green }
}
群组选择器嵌套
css中，使用,分割的群组选择器可以同时应用样式在多个选择器上，如：
h1, h2 {
margin: 0;
}
但是，如果想对一个特定的容器元素内的多个元素，使用群组选择器时，就会有很多重复性工作。
1
.container h1, .container h2, .container h3 { margin-bottom: .8em }
而，sass的嵌套特性，在解开一个内嵌的群组选择器时，会把每一个内嵌选择器正确的结合起来：
.container{
h1,h2,h3{
margin-bottom:.8em;
}
}
sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。