Less 中的嵌套規(guī)則與 & 符號的使用

今天這篇文章主要學習 Less 中的嵌套，嵌套應該很容易理解，html?語言中就支持標簽的嵌套。我們在使用?css?時，如果想要為多層嵌套的元素設置樣式，要么給元素加上一個類選擇器或ID選擇器，要么使用后代選擇器。例如：

.xkd{  font-size: 14px;}.xkd p{  line-height: 25px;}.xkd p span{  color: #ccc;}

這樣寫雖然也好理解，但是沒有那么直觀，維護起來也不方便。

而 Less 中的嵌套規(guī)則正好可以解決這樣問題，嵌套規(guī)則允許在一個選擇器中嵌套另一個選擇器，這樣可以使得代碼看起來一目了然，后期維護也方便。

嵌套的使用

例如上面的?css?代碼使用 Less 語言來寫：

.xkd{   font-size: 14px;   p{      line-height: 25px;      span{         color: #ccc;      }   }}

這樣整體看起來是不是更直觀一些，一層套一層。但是注意喲，一般我們不會嵌套太多層，嵌套的層數(shù)越多，性能就越差，建議一般嵌套三層左右。

&符號的使用

在我們使用嵌套規(guī)則時，要特別注意?&?符號的使用，&?符號可以表示對父選擇器的引用。

在一個內(nèi)層選擇器的前面，如果沒有?&?符號，則這個內(nèi)層選擇器會被解析為父選擇器的后代。如果內(nèi)層選擇器前面有一個?&?符號，則內(nèi)層選擇器會被解析為父選擇器自身或父選擇器的偽類。

示例：

例如我們看下面這段代碼：

.xkd{    a{        color: #eee;    }}

編譯成?css?代碼：

.xkd a {  color: #eee;}

可以看到，標簽選擇器 a 前面沒有加?&?符號，所以這個標簽選擇器 a 被解析為 .xkd 選擇器的后代。

示例：

再來看一下內(nèi)層選擇器前面加?&?符號：

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

更改選擇器順序

什么是更改選擇器順序呢，就是有些時候可能需要將內(nèi)層選擇器放在父選擇器之前，此時我們可以將?&?放在當前選擇器后面來完成。

示例：

例如下面這段代碼，我們希望 .xkd 選擇器位于 .nav 選擇器之前，可以在 .xkd 選擇器的后面加一個?&?符號：

.nav{   font-size: 14px;   .xkd &{     color: #fff;   }}

編譯為?css?代碼：

.nav {  font-size: 14px;}.xkd .nav {  color: #fff;}

可以看到，編譯之后的?css?代碼中 .xkd 選擇器位于 .nav 選擇器前面。

總結(jié)

今天這篇文章內(nèi)容主要是希望我們學習并掌握 Less 中的嵌套規(guī)則和?&?符號的使用，?&?符號可以表示父選擇器。最后，記住使用嵌套的時候不要嵌套太多層，會影響性能。