scss-&父選擇器標識符

　　在使用選擇器嵌套的時候有一種情況需要特別注意，先看一段scss代碼實例:

.text a {
  color: blue;
  :hover { color: red }
}

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

.text a {
  color: blue;
}
.text a:hover {
  color: red;
}

　　但是現實並非如此，它會按照選擇器嵌套原則將其編譯成如下css代碼:

.text a {
  color: blue;
}
.text a :hover {
  color: red;
}

　　上面的代碼實現的效果是: class為text的所有后代a標簽的所有后代元素，當鼠標懸浮時，字體顏色都會變為紅色。

　　這個時候就可以使用&父選擇器標識符，它的作用就相當於一個父選擇器的占位符。可以實現class為text的所有后代a標簽的元素，當鼠標懸浮時，字體顏色都會變為紅色。

.text a {
  color: blue;
  &:hover { color: red }
}

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

.text a {
  color: blue;
}
.text a:hover {
  color: red;
}

　　當然，&父選擇器標識符並不僅僅用於鏈接偽類選擇器，看如下scss代碼實例:

#content aside {
  color: red;
  body.ie & { color: green }
}

　　編譯為css代碼如下:

#content aside {color: red};
body.ie #content aside { color: green }