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;     }}