less学习---less的嵌套规则
上一篇：less变量
上篇主要讲述了less的变量的基本使用，本篇我们来讲解下less的一个常用规则，那就是嵌套了（老套娃了），这个使你在使用css的时候能够用起来非常方便和爽（爽就对了）
那么什么是嵌套呢，我们首先看一个例子：
<header class="page-header">
<h1 class="title"></h1>
<nav class="page-nav"></nav>
</header>
<style>
.page-header {
background-color:#666666;
color:#000;
}
.page-header .title{
color:#0f0f0f;
}
.page-header .page-nav:hover{
background-color:#ffffff;
}
</style>
我们在编写如上一个html时，我们需要对其进行css的样式设置，因此，一般都会按照上边进行设置，但是我们应该都能发现到h1和nav标签都是header标签的子标签，但作为一名合格的码农，偷懒是必修课（嘻嘻），因此，嵌套本人用的最爽的原因便是可以减少敲代码，但并不会影响到上边css的易读性。
.page-header {
background-color:#666666;
color:#000;
.title {
color:#0f0f0f;
}
.page-nav:hover{
background-color:#ffffff;
}
}
上边便是嵌套的写法，是不是看着更简洁了（嘻嘻）
看了上边代码相信聪明的你一定秒懂并会使用了吧，那我们接下来进阶一下，
在page-nav类中，若我们定义了一个或者多个伪类并为其设置了样式，是不是要这么写呢：
.page-header {
background-color:#666666;
color:#000;
.title {
color:#0f0f0f;
}
.page-nav {
font-size:14px;
}
.page-nav:hover{
background-color:#ffffff;
}
.page-nav:visited {
color:#0000ff;
}
}
还是说：可以用嵌套嘛，在里面套着就行了
.page-header {
background-color:#666666;
color:#000;
.title {
color:#0f0f0f;
}
.page-nav {
font-size:14px;
:hover{ background-color:#ffffff; }
:visited { color:#0000ff; }
}
}
好了，公布结果，第一种没有错，能正常跑起来，但是不够偷懒，不得精髓啊，第二种，偷懒的不错，可惜并不能编译成功
因为less在编译的时候，会解析成.page-nav :hover(这里中间是有空格的，不要看漏了)，伪类hover变成nav的子级类了，实际上如果你认真看上边成功编译的例子，你都会发现到，他在嵌套编译后出现的都是以父级子级进行转换，所以对于伪类这种中间没有带空格的怎么办呢？这个就需要引入一个父选择器（&）没错就是这个符号，他代表的是父级的类
他的用法呢，也很简单，先上例子
.page-nav {
font-size:14px;
&:hover{ background-color:#ffffff; }
&:visited { color:#0000ff; }
}
是的，直接在伪类前边添加&就可以了，记得中间是没有空格的哦，这样子我们就能够正常的表示伪类了，都是归功于父选择器符号（&），他在上边的例子中就是代表着.page-nav这个父类的名称
通过上边是不是知道了父选择器符号了，那么聪明如你肯定知道他不止这么简单了，如果他能够表示父类，那么他还可以怎么玩呢？
老惯例，先上几个例子：
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
//编译后
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
上边这个例子是不是发现打开了新世界了，&就是表示父类名称，那么在里面使用其他字符串来，那么是不是可以表示多个类了，嘻嘻
.grand {
.parent {
& > & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
}
//编译后
.grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}
css选择器学过的小伙伴肯定清楚，有各种各样的并集选择器，交集选择器啊等等，那么他们跟&的配合就很简单明了了，因为看到这里，你肯定已经发现了，实际上&真就仅仅表示父类的名称，你只是把他用&表示而已，这样子是不是很清楚了？
那么看到这里，你是不是基本已经了解了呢？答案是否的，哈哈
我们来看一个例子：
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
对于上述这种老套娃的，编译后的结果是这样的
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}
是不是发现了什么？他在里面将&替换成.header .menu，所以在编写多层嵌套时，这点是需要注意的
最后我们来看最后一个例子，我只粘贴less不粘贴css，如果你真的懂了，相信你一定可以写出来
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
最后本篇主要是学习至官方文档的，就是笔记而已（整理下方便日后查阅，对了，最后的答案也在官方文档里，哈哈）。
