sass嵌套CSS 规则;

• css中重复写选择器是非常恼人的。但在Sass中，你可以在规则块中嵌套规则块。如：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
//一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时，这种能力就非常有用了。

• 父选择器的标识符&;

  - sass中css规则的嵌套相当于使用后代选择器的方式生成连接。
  - 但是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。
//比如：
article a {
  color: blue;
  :hover { color: red }
}
//会被解析为：
article a{ color: blue;}
article a :hover{color: red;}
//这样article元素内的所有子元素在被hover时都会变成红色。这是不正确的！你只是想把这条规则应用到超链接自身。

-解决之道为使用一个特殊的sass选择器，即父选择器。它就是一个简单的&符号。
article a {
  color: blue;
  &:hover { color: red }
}
//当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
article a { color: blue }
article a:hover { color: red }

• 群组选择器的嵌套;

sass也可以处理群组选择器的嵌套
当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来

• 子组合选择器和同层组合选择器：>、+和~;

//第一个选择器会选择article下的所有命中section选择器的元素。而第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
  article section { margin: 5px }
  article > section { border: 1px solid #ccc }

//你可以用同层相邻组合选择器+选择header元素后紧跟的p元素：
  header + p { font-size: 1.1em }
  
//你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
  article ~ article { border-top: 1px dashed #ccc }
 
//这些组合选择器可以毫不费力地应用到sass的规则嵌套中。

//把它们放在外层选择器后边
article {
    > section { background: #eee }
       }
//或里层选择器前边都可以
article > section { background: #eee }

• 在sass中，除了CSS选择器，属性也可以进行嵌套。

//把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。
nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
     }
}