Sass 中的嵌套选择器

Sass 允许您轻松嵌套选择器并按层次结构组织规则：

.main {
  background-color: antiquewhite;
  margin: 0 auto;

  img {
    max-width: 100%;
    transform: rotate(3deg);
  }
  p:first-child {
    font-size: 1.2em;
span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

上述代码编译为 CSS 后，将产生以下内容：

.main {
  background-color: antiquewhite;
  margin: 0 auto;
}
.main img {
  max-width: 100%;
  transform: rotate(3deg);
}
.main p:first-child {
  font-size: 1.2em;
}
.main p:first-child span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

同一命名空间中的属性

您还可以嵌套位于同一命名空间中的属性。例如，背景属性可以像这样嵌套。请注意在背景示例中的关键字：

.main {
  margin: 0 auto;

这将产生以下 CSS：

.main {
  margin: 0 auto;
  background-color: antiquewhite;
  background-image: url(images/gator.svg);
  background-repeat: repeat-x;
  background-size: 36px 48px;
}

? 过度嵌套会导致 CSS 混乱，因此请将其最大深度保持在几层以内。