上一篇：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;
}
}
最后本篇主要是學習至官方文檔的，就是筆記而已（整理下方便日后查閱，對了，最后的答案也在官方文檔里，哈哈）。