Less的嵌套規則

在使用標准CSS時，要為多層嵌套的元素定義樣式，要么使用后代選擇器從外到內的嵌套定義，要么給這個元素加上類名或 id 來定義。這樣的寫法雖然很好理解，但維護起來很不方便，因為無法清晰了解到樣式之間的關系。

在Less中，嵌套規則使這個問題迎刃而解。嵌套規則允許在一個選擇器中嵌套另一個選擇器，這更容易設計出精簡的代碼，並且樣式之間的關系一目了然。假設以下HTML 代碼片段：

1. <header>
2.     <h1><a href="http://www.waibo.wang/">歪脖網</a></h1>
3.     <p>學Web開發，就到歪脖網！</p>
4. </header>

Less代碼可以這樣寫：

1. header {
2. h1 {
3. font-size: 26px;
4. font-weight: bold;
5. a {
6. color: #f36;
7. text-decoration: none;
9. &:hover {
10. color: #63f;
11. text-decoration: underline;
12. }
13. }
14. }
16. p {
17. font-size: 12px;
19. &.slogan {
20. color: #f00;
21. }
22. }
23. }

這難道不就是DOM的寫法嗎？說實話，當你第一眼看到這種寫法，你就會情不自禁地愛上Less。這種寫法減了選擇器的層級關系，使代碼的結構非常清晰，無論是閱讀、還是后期維護都是那么自然，是不是有一種本來就該如此的感覺？

在使用嵌套規則時，需要特別注意 & 符號。內層選擇器前面的 & 符號就表示對父選擇器的引用。在一個內層選擇器的前面，如果沒有 & 符號，則它被解析為父選擇器的后代；如果有 & 符號，它就被解析為父元素自身或父元素的偽類。

比如，上述代碼中，由於選擇器 h1 前面沒有 & 符號，則 h1 被解析為 header 選擇器的后代，即 header h1；而 :hover 和 .slogan 前面有 & 符號，& 符號表示對父選擇器的引用，則 &.slogan 表示父元素自身，&:hover 表示父元素的偽類，解析結果為 a:hover 和 p.slogan。編譯后的CSS代碼為：

1. header h1 {
2.   font-size: 26px;
3.   font-weight: bold;
4. }
5. header h1 a {
6.   color: #f36;
7.   text-decoration: none;
8. }
9. header h1 a:hover {
10.   color: #63f;
11.   text-decoration: underline;
12. }
13. header p {
14.   font-size: 12px;
15. }
16. header p.slogan {
17.   color: #f00;
18. }

事實上，父選擇器運算符 & 的作用，就是讓當前的選擇器和父級選擇器，按照特定的規則進行連接。它有多種用途，比如創建重復的類名：

1. .button {
2.   &-ok {
3.     background-image: url("ok.png");
4.   }
5.   &-cancel {
6.     background-image: url("cancel.png");
7.   }
8.   &-custom {
9.     background-image: url("custom.png");
10.   }
11. }

編譯后的CSS代碼為：

1. .button-ok {
2.   background-image: url("ok.png");
3. }
4. .button-cancel {
5.   background-image: url("cancel.png");
6. }
7. .button-custom {
8.   background-image: url("custom.png");
9. }

在一個選擇器中，& 可以重復出現多次，這樣，就可以多次引用父選擇器而不必重復它的名字。如：

1. .link {
2.   & + & {
3.     color: red;
4.   }
5.   & & {
6.     color: green;
7.   }
8.   && {
9.     color: blue;
10.   }
11.   &, &ish {
12.     color: cyan;
13.   }
14. }

編譯后的CSS代碼為：

1. .link + .link {
2.   color: red;
3. }
4. .link .link {
5.   color: green;
6. }
7. .link.link {
8.   color: blue;
9. }
10. .link, .linkish {
11.   color: cyan;
12. }

需要注意的是所有的父選擇器，而不是僅僅重復最近的祖先選擇器。請看以下例子：

1. .grand {
2.   .parent {
3.     & > & {
4.       color: red;
5.     }
6.     & & {
7.       color: green;
8.     }
9.     && {
10.       color: blue;
11.     }
12.     &, &ish {
13.       color: cyan;
14.     }
15.   }
16. }

編譯后的CSS代碼為：

1. .grand .parent > .grand .parent {
2.   color: red;
3. }
4. .grand .parent .grand .parent {
5.   color: green;
6. }
7. .grand .parent.grand .parent {
8.   color: blue;
9. }
10. .grand .parent,
11. .grand .parentish {
12.   color: cyan;
13. }

還可以將 & 放在一個選擇器的后面，來改變選擇器的順序，將當前選擇器排列到最前面。如：

1. .header {
2.   .menu {
3.     border-radius: 5px;
4.     .no-borderradius & {
5.       background-image: url('images/button-background.png');
6.     }
7.   }
8. }

選擇器 .no-borderradius & 會使 .no-borderradius 置於他的父選擇器 .header .menu 的前面，形成 .no-borderradius .header .menu的結構。編譯后的CSS代碼為：

1. .header .menu {
2.   border-radius: 5px;
3. }
4. .no-borderradius .header .menu {
5.   background-image: url('images/button-background.png');
6. }

將 & 用在一個使用逗號分隔的選擇器列表中，可以產生列表中所有選擇器的所有可能的排列，這被稱作組合爆炸。如：

1. p, a, ul, li {
2.   border-top: 2px dotted #366;
3.   & + & {
4.     border-top: 0;
5.   }
6. }

上述列表中有 4 個選擇器，列表中所有選擇器的所有可能的排列，將有 16 種可能。編譯后的CSS代碼為：

1. p,
2. a,
3. ul,
4. li {
5.   border-top: 2px dotted #366;
6. }
7. p + p,
8. p + a,
9. p + ul,
10. p + li,
11. a + p,
12. a + a,
13. a + ul,
14. a + li,
15. ul + p,
16. ul + a,
17. ul + ul,
18. ul + li,
19. li + p,
20. li + a,
21. li + ul,
22. li + li {
23.   border-top: 0;
24. }