.xkd{ font-size: 14px;}.xkd p{ line-height: 25px;}.xkd p span{ color: #ccc;}
這樣寫雖然也好理解，但是沒有那么直觀，維護起來也不方便。而 Less 中的嵌套規則正好可以解決這樣問題，嵌套規則允許在一個選擇器中嵌套另一個選擇器，這樣可以使得代碼看起來一目了然，后期維護也方便。
嵌套的使用
例如上面的 css 代碼使用 Less 語言來寫：
.xkd{ font-size: 14px; p{ line-height: 25px; span{ color: #ccc; } }}
這樣整體看起來是不是更直觀一些，一層套一層。但是注意喲，一般我們不會嵌套太多層，嵌套的層數越多，性能就越差，建議一般嵌套三層左右。
&符號的使用
在我們使用嵌套規則時，要特別注意 & 符號的使用，& 符號可以表示對父選擇器的引用。在一個內層選擇器的前面，如果沒有 & 符號，則這個內層選擇器會被解析為父選擇器的后代。如果內層選擇器前面有一個 & 符號，則內層選擇器會被解析為父選擇器自身或父選擇器的偽類。
示例：
例如我們看下面這段代碼：
.xkd{ a{ color: #eee; }}
編譯成 css 代碼：
.xkd a { color: #eee;}
可以看到，標簽選擇器 a 前面沒有加 & 符號，所以這個標簽選擇器 a 被解析為 .xkd 選擇器的后代。
示例：
再來看一下內層選擇器前面加 & 符號：
.xkd{ &one{ font-size: 12px; } &:hover{ color: #fff; }}
編譯成 css 代碼：
.xkdone { font-size: 12px;}.xkd:hover { color: #fff;}
上面代碼中，one 前面添加了一個 & 符號，這個符號就表示父選擇器本身，所以解析后為.xkdone。當然 :hover 偽類前面的 & 符號也是同理。
重復引用父選擇器
通過使用 & 符號，可以重復引用父類選擇器。
示例：
例如下面這段 Less 代碼，如果我們希望每個選擇器名的前綴都為 top，可以像下面這樣簡寫：
.xkd{ &-one{ font-size: 14px; } &-two{ font-size: 16px; } &-three{ font-size: 18px; }}
編譯為 css 代碼：
.xkd-one { font-size: 14px;}.xkd-two { font-size: 16px;}.xkd-three { font-size: 18px;}
除此之外，還可以同時使用多個 & 符號，並使用其他運算符連接起來：
.xkd{ &&-one{ font-size: 14px; } &,&-two{ font-size: 16px; } &, &er{ font-size: 18px; }}
編譯為 css 代碼：
.xkd.xkd-one { font-size: 14px;}.xkd,.xkd-two { font-size: 16px;}.xkd,.xkder { font-size: 18px;}
更改選擇器順序
什么是更改選擇器順序呢，就是有些時候可能需要將內層選擇器放在父選擇器之前，此時我們可以將 & 放在當前選擇器后面來完成。
示例：
例如下面這段代碼，我們希望 .xkd 選擇器位於 .nav 選擇器之前，可以在 .xkd 選擇器的后面加一個 & 符號：
.nav{ font-size: 14px; .xkd &{ color: #fff; }}
編譯為 css 代碼：
.nav { font-size: 14px;}.xkd .nav { color: #fff;}
可以看到，編譯之后的 css 代碼中 .xkd 選擇器位於 .nav 選擇器前面。