2-1. 父選擇器的標識符&
一般情況下,sass
在解開一個嵌套規則時就會把父選擇器(#content
)通過一個空格連接到子選擇器的前邊(article
和aside
)形成(#content article
和#content aside
)。這種在CSS里邊被稱為后代選擇器,因為它選擇ID為content
的元素內所有命中選擇器article
和aside
的元素。但在有些情況下你卻不會希望sass
使用這種后代選擇器的方式生成這種連接。
最常見的一種情況是當你為鏈接之類的元素寫:hover
這種偽類時,你并不希望以后代選擇器的方式連接。比如說,下面這種情況sass
就無法正常工作:
article a {
color: blue;
:hover { color: red }
}
這意味著color: red
這條規則將會被應用到選擇器article a :hover
,article
元素內鏈接的所有子元素在被hover
時都會變成紅色。這是不正確的!你想把這條規則應用到超鏈接自身,而后代選擇器的方式無法幫你實現。
解決之道為使用一個特殊的sass
選擇器,即父選擇器。在使用嵌套規則時,父選擇器能對于嵌套規則如何解開提供更好的控制。它就是一個簡單的&
符號,且可以放在任何一個選擇器可出現的地方,比如h1
放在哪,它就可以放在哪。
article a {
color: blue;
&:hover { color: red }
}
當包含父選擇器標識符的嵌套規則被打開時,它不會像后代選擇器那樣進行拼接,而是&
被父選擇器直接替換:
article a { color: blue }
article a:hover { color: red }
在為父級選擇器添加:hover
等偽類時,這種方式非常有用。同時父選擇器標識符還有另外一種用法,你可以在父選擇器之前添加選擇器。舉例來說,當用戶在使用IE瀏覽器時,你會通過JavaScript
在標簽上添加一個ie的類名,為這種情況編寫特殊的樣式如下:
#content aside {
color: red;
body.ie & { color: green }
}
/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }
sass
在選擇器嵌套上是非常智能的,即使是帶有父選擇器的情況。當sass
遇到群組選擇器(由多個逗號分隔開的選擇器形成)也能完美地處理這種嵌套。