002.使用嵌套

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

编译后

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

1. 父选择器的标识符&

article a {
  color: blue;
  :hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

2. 群组选择器的嵌套

nav, aside {
  a {color: blue}
}

编译后

nav a, aside a {color: blue}

3. 子组合选择器和同层组合选择器：>、+和~

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

编译后

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

4. 嵌套属性

nav {
  border: 1px solid #ccc {
      left: 0px;
      right: 0px;
  }
}

编译后

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

5. 嵌套媒体查询

nav {
  width:1200px;
  @media (max-width:768px) {
        width:100%;
  }
}

编译后

nav {
  width:1200px;
}
@media (max-width:768px) {
    nav{
        width:100%;
    }
}

6. @at-root 指令

.content {
  border:1px solid #ccc;
  @at-root .content-left { color:#666; }
  @at-root {
      .content-right-nav { height:120px; }
      .content-right-body { height:600px; }
  }
}

编译后

.content { border:1px solid #ccc; }
.content-left { color:#666; }
.content-right-nav { height:120px; }
.content-right-body { height:600px; }

7. 使用@ at-root 将嵌套指令移出

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

编译后

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}