层级嵌套和父选择器

层级嵌套

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

父选择器 & 

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }  // 此处的 & 等价于父元素 a
  body.firefox & { font-weight: normal; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
body.firefox a {
    font-weight: normal;
}

#main {
  color: black;
  &-sidebar { border: 1px solid; } // 此处的 & 等价于父元素 a
}

编译为

#main {
  color: black;
}
#main-sidebar {
    border: 1px solid;
}