SCSS - 嵌套

嵌套就像下面的樣子，先寫自身的樣式，再嵌套子元素。

嵌套不要超過三層，否則産生難以了解的代碼。

注意&符号，它叫父元素占位符，如果沒有父元素占位符，解析之後會是：

<code>#a .nav ul li .active</code>指代什麼元素？指代li下面的所有元素中class是active的元素，這根本不是我們的本意，我們的本意是ul下面所有li中class是active的li。是以不能這麼寫。現在，如果加上&amp;符号，解析之後會是：

這樣就符合要求了。是以，&amp;符号指代父元素，當.active并不是li的子元素，而是li自身的一個css狀态時，你應該使用&amp;符号。凡是必須将兩個選擇符連寫在一起的場合，包括ele.class、ele:active等等，都适用&amp;。

當一個元素的樣式在另一個容器中有其他指定的樣式時，可以使用嵌套選擇器讓他們保持在同一個地方。<code>.no-opacity &amp;</code>相當于<code>.no-opacity .foo</code>。

進階：群組選擇器的寫法

如果父元素是.container，子元素有h1、h2、h3，他們行高都是1.5em，怎麼寫？有兩種寫法：

顯然第一種重複了n次.container，是一種愚蠢的寫法，下面的寫法才是科學的。

總之，任何一級選擇器都可以寫成組合選擇器。

進階：子組合選擇器和同層組合選擇器： &gt;、 +和~

子組合選擇器的意思是，有一個#id&gt;li清單，如果你明确知道不需要給#id設定任何規則，隻想給li設定規則，那麼，你就沒必要寫成下面的樣子：

隻需要下面這樣即可。說白了&gt;并不是scss，而是原生css的寫法。

同樣道理，後鄰選擇符（e+f）和後鄰們選擇符（e~f）也可以直接用。不過，sass還有更靈活的用法：

1、把f寫到大括号裡面，+和~也放到裡面。請記住，不要以為大括号裡面的元素一定是子元素，還可能是後鄰（們）元素。

2、把f寫到大括号裡面，但是+和~放到外面。下面的dl &gt;就是把&gt;放到了外面，可以少敲幾個&gt;。

3、如果都在大括号外面，那就是正常css的寫法，不多說。

進階：屬性名也可以拆開，用大括号嵌套！

這個就有點牛逼了，凡是帶中劃線的屬性名，都可以拆開，然後用大括号嵌套，讓你懶到家。

寫法是，把border-style的前半部分寫在塊外，後面加個冒号，然後把後半部分寫到大括号裡面即可。将來解析的時候，解析器會自動拼裝。

注意絕對不可以忘了加冒号，如果忘了加冒号，就成了最簡單的嵌套，就全錯了。

更複雜可以這樣，外面是一個正常的簡寫屬性和它的值，後面跟個大括号，大括号裡面可以聲明幾個細分屬性的後半名稱和值：

解析之後是：