父選擇器（）

巢狀非常適合將相關選擇器放在一起，以便將來的開發人員更容易理解你的程式碼。由＆符號（“＆”）表示的父選擇器可以在更復雜的情況下幫助執行此操作。有幾種方法可以使用它。

通過將新選擇器直接放在父選擇器之後，建立一個新的選擇器，該選擇器同時需要父選擇器和另一個選擇器。

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