SCSS &父選擇器識別符號

關於選擇器巢狀可以參閱scss巢狀規則一章節。

在使用選擇器巢狀的時候有一種情況需要特別注意，先看一段程式碼例項:

[Scss] 純文字檢視 複製程式碼
article a {
  color: blue;
  :hover { color: red }
}

也許寫此段程式碼目的是為了將其編譯成如下css程式碼:

[CSS] 純文字檢視 複製程式碼
article a {
  color: blue;
}
article a:hover {
  color: red;
}

但是現實並非如此，它會按照選擇器巢狀原則將其編譯成如下css程式碼:

[CSS] 純文字檢視 複製程式碼
article a {
  color: blue;
}
article a :hover {
  color: red;
}

上面的程式碼實現的效果是:連結<a>的所有後代元素，當滑鼠懸浮時，字型顏色都會變為紅色。

這個時候就可以使用&父選擇器識別符號，它的作用就相當於一個父選擇器的佔位符。

[Scss] 純文字檢視 複製程式碼
article a {
  color: blue;
  &:hover { color: red }
}

上面的程式碼編譯的時候，會將&替換為父選擇器a，編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
article a {
  color: blue;
}
article a:hover {
  color: red;
}

當然，&父選擇器識別符號並不僅僅用於連結偽類選擇器，看如下程式碼例項:

[Scss] 純文字檢視 複製程式碼
#content aside {
  color: red;
  body.ie & { color: green }
}

編譯為css程式碼如下:

[CSS] 純文字檢視 複製程式碼
#content aside {color: red};
body.ie #content aside { color: green }