Less的嵌套规则

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. }