相比于傳統的css,LESS增加了幾個核心功能,如變量、混合、函數等,讓頁面的樣式動態起來了。上一章介紹了LESS中函數的使用和規范,本章來介紹一下LESS的嵌套與繼承。
一,嵌套
Less 提供了使用嵌套代替層疊或與層疊結合使用的能力。我們之前選擇器層疊使用如圖所示:

結構復雜且冗余,編寫起來十分不方便,而Less的嵌套寫法如圖:

用 Less 書寫的代碼更加簡潔,并且結構上更符合 HTML 的組織結構。
在嵌套規則中, & 表示父選擇器,常用于給現有選擇器添加偽類。如圖:

編譯后的代碼為
.fanhui img {margin-right : 9px;}
二,繼承
繼承可讓多個選擇器應用同一組屬性,最終編譯為并集選擇器。其性能比混合高,但靈活性比混合低。

編譯后的代碼為:
ul li {
background: blue;
}
.red,
ul li {
color: red;
}
下一篇: css整體移動div



