嵌套{{}}
嵌套就像下面的样子，先写自身的样式，再嵌套子元素。
嵌套不要超过三层，否则产生难以理解的代码。
#a {
float: right;
.nav {
float: left;
color: red;
ul {
width: 400px;
li {
font-size: 30px;
a {
color: blue;
}
&.active {
font-weight: bold;
}
}
}
}
}
注意&符号，它叫父元素占位符，如果没有父元素占位符，解析之后会是：
#a .nav ul li .active {
font-weight: bold;
}
#a .nav ul li .active指代什么元素？指代li下面的所有元素中class是active的元素，这根本不是我们的本意，我们的本意是ul下面所有li中class是active的li。所以不能这么写。现在，如果加上&符号，解析之后会是：
#a .nav ul li.active {
font-weight: bold;
}
这样就符合要求了。所以，&符号指代父元素，当.active并不是li的子元素，而是li自身的一个css状态时，你应该使用&符号。凡是必须将两个选择符连写在一起的场合，包括ele.class、ele:active等等，都适用&。
当一个元素的样式在另一个容器中有其他指定的样式时，可以使用嵌套选择器让他们保持在同一个地方。.no-opacity &相当于.no-opacity .foo。
.foo {
// …
.no-opacity & {
display: none;
}
}
进阶：群组选择器的写法
如果父元素是.container，子元素有h1、h2、h3，他们行高都是1.5em，怎么写？有两种写法：
.container h1, .container h2, .container h3 {
line-height: 1.5em;
}
.container {
h1, h2, h3 {
line-height: 1.5em;
}
}
显然第一种重复了N次.container，是一种愚蠢的写法，下面的写法才是科学的。
总之，任何一级选择器都可以写成组合选择器。
进阶：子组合选择器和同层组合选择器： >、 +和~
子组合选择器的意思是，有一个#id>li列表，如果你明确知道不需要给#id设置任何规则，只想给li设置规则，那么，你就没必要写成下面的样子：
#id {
li {
......
}
}
只需要下面这样即可。说白了>并不是SCSS，而是原生css的写法。
#id > li {
......
}
同样道理，后邻选择符（E+F）和后邻们选择符（E~F）也可以直接用。不过，SASS还有更灵活的用法：
1、把F写到大括号里面，+和~也放到里面。请记住，不要以为大括号里面的元素一定是子元素，还可能是后邻（们）元素。
2、把F写到大括号里面，但是+和~放到外面。下面的dl >就是把>放到了外面，可以少敲几个>。
3、如果都在大括号外面，那就是常规CSS的写法，不多说。
article {
~ article {
border-top: 1px dashed #ccc
}
> section {
background: #eee
}
dl > {
dt {
color: #333
}
dd {
color: #555
}
}
nav + & {
margin-top: 0
}
}
进阶：属性名也可以拆开，用大括号嵌套！
这个就有点牛逼了，凡是带中划线的属性名，都可以拆开，然后用大括号嵌套，让你懒到家。
写法是，把border-style的前半部分写在块外，后面加个冒号，然后把后半部分写到大括号里面即可。将来解析的时候，解析器会自动拼装。
注意绝对不可以忘了加冒号，如果忘了加冒号，就成了最简单的嵌套，就全错了。
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
更复杂可以这样，外面是一个正常的简写属性和它的值，后面跟个大括号，大括号里面可以声明几个细分属性的后半名称和值：
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
解析之后是：
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
