在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
Less 内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代。如果有 & 符号，它就被解析为父元素自身或父元素的伪类。同时用在选择器中的 & 还可以反转嵌套的顺序并且可以应用到多个类名上。
用于当前选择器的伪类或者伪元素，如 :hover、:focus、:after、:before 等
.demo {
color: #333;
background: #F0F0F0;
&:after {
content: '.';
display: block;
background-color: aquamarine;
}
}编译 less，输出的 CSS 如下：
.demo {
color: #333;
background: #F0F0F0;
}
.demo:after {
content: '.';
display: block;
background-color: aquamarine;
}作为内层选择器表示对父选择器的引用，这里要注意在写 less 的嵌套的时候会有差异：
.demo2 {
color: #333;
background: #F0F0F0;
&-title {
text-align: center;
}
}编译 less，输出的 CSS 如下：
.demo2 {
color: #333;
background: #F0F0F0;
}
.demo2-title {
text-align: center;
}注意：上面的 & 引用了 .demo，这里虽然是嵌套的写法但仅代表选择器的引用而不是 css 的嵌套关系，和下面的代码有 css 层级的不同。例如：
.demo2 {
.demo2-title {
text-align: center;
}
}编译 less，输出的 CSS 如下：
.demo2 .demo2-title {
text-align: center;
}注意：在一个选择器中，& 可以重复出现多次，这样就可以多次引用父选择器而不必重复它的名字。例如：
&& 表示.demo.demo
& & 表示.demo .demo
&, & 表示.demo, .demo
将选择器添加到继承的（父）选择器之前可能很有用。这可以通过将 & 放在当前选择器之后来完成。例如，在使用 Modernizr 时，你可能希望根据支持的功能指定不同的规则：
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}选择器 .no-borderradius & 会将 .no-borderradius 添加到其父 .header .menu 的前面，以在输出中形成 .no-borderradius .header .menu：
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}& 也可用于在逗号分隔列表中生成选择器的所有可能排列组合：
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}这将扩展到指定元素的所有可能 (16) 组合：
p, a, ul, li {
border-top: 2px dotted #366;
}
p + p, p + a, p + ul, p + li,
a + p, a + a, a + ul, a + li,
ul + p, ul + a, ul + ul, ul + li,
li + p, li + a, li + ul, li + li {
border-top: 0;
}
川公网安备51010802032098
