LESS上的多重嵌套類

我在本論壇中搜索了谷歌和互聯網的搜索結果。我只是想知道是否有任何問題，如果我在LESS樣式表中使用多個嵌套類？LESS上的多重嵌套類

即：

#main-menu{ 
    height:50px; 
    overflow:visible; 
    background-color: @main_green; 
    border:none; 
    border-bottom:5px solid darken(@main_green, 10%); 
    .border-radius(0); 

    .nav{ 
     > li{ 
      > a{ 
       color:#FFFFFF; 
       padding:12px 20px 13px; 
       border-right:1px solid darken(@main_green, 10%); 
       .transition(all .09s ease); 

       &:hover, 
       &:focus{ 
        background-color:darken(@main_green, 5%); 
        padding:13px 19px 17px 21px; 
        border-right-color:transparent; 

        .box-shadow(inset 1px 2px 4px -1px rgba(0,0,0,0.4)); 
       } 
      } 

      &.open > a{ 
       background-color:darken(@main_green, 5%); 
       padding:13px 19px 16px 21px; 
       border-right-color:transparent; 

       .box-shadow(inset 1px 2px 4px -1px rgba(0,0,0,0.4)); 
      } 

      &:first-child{ 
       > a{ 
        border-left:1px solid darken(@main_green, 10%); 
       } 
      } 

     } 
    } 

    .dropdown-menu{ 
     background-color:darken(@main_green,5%); 
     border:none; 
    } 

}

的編譯結果是好的，沒有提出任何錯誤。

謝謝。

來源

2014-11-21 Fazri Alfan Muaz

完全沒有問題，但要注意嵌套它太多，你可能最終會讓你的css選擇器過於具體。作爲示例，通用全局使用的元素的樣式不應該是不必要的嵌套。

而且下面的嵌套可以合併爲一個單一的選擇：

&:first-child{ 
      > a{ 
       border-left:1px solid darken(@main_green, 10%); 
      } 
     }

是一樣的：

&:first-child > a{ 
    border-left:1px solid darken(@main_green, 10%); 
}

所以築巢，當父母有CSS屬性中應使用，否則你可以如上所示組合選擇器。

來源

2014-11-21 01:13:33 seahorsepip

啊....我知道了。所以我不需要嵌套類，如果父類中沒有不同或一些規則。只是把它作爲單個選擇器來代替。非常感謝。 – 2014-11-21 01:18:14

LESS上的多重嵌套類

回答

相關問題