scss-嵌套规则

　　在编写css代码的时候，可能由于嵌套的原因，需要多次重复书写选择器。

　　代码如下:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

　　上面的代码要多次重复#content和article选择器，非常繁琐，使用scss即可解决此问题。

　　代码如下:

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

　　上面代码实现了包含选择器的嵌套，逻辑非常简单:

　　那就是使用大括号作为层级区分，一层一层实现嵌套，在编译的时候再一层一层剥离出来。

　　群组选择器的嵌套:

　　一、父选择器重复：

　　来看一段代码实例:

.container h1, .container h2, .container h3 { margin-bottom: .8em }

　　上面的群组选择器中，我们需要不断的重复书写.container选择器。

　　使用scss就可以避免此问题，代码如下：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

　　二、子选择器重复

　　来看一段代码实例:

nav a, aside a {color: blue}

 

　　使用scss就可以避免此问题，代码如下：

nav, aside {
  a {color: blue}
}

　　子组合选择器和同层组合选择器:

　　css代码如下：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }

　　对应的scss代码如下:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
}

　　特别说明:~、和+选择器既可以放在大括号的外部，也可以放在大括号的内部。