父选择器（）

嵌套非常适合将相关选择器放在一起，以便将来的开发人员更容易理解你的代码。由＆符号（“＆”）表示的父选择器可以在更复杂的情况下帮助执行此操作。有几种方法可以使用它。

通过将新选择器直接放在父选择器之后，创建一个新的选择器，该选择器同时需要父选择器和另一个选择器。

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

通过将父选择器放在嵌套选择器之后，使父对象出现在已编译 CSS 中的嵌套选择器之后。

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

国家和伪元素

除了为类和子元素使用嵌套之外，使用父选择器嵌套也常用于将:active，:hover 和:focus 的状态组合为链接。

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

同样，你可以通过嵌套父选择器来设置伪元素的样式。

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}