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

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

更多专业前端知识，请上【猿2048】www.mk2048.com