我們可以用less嵌套的方式嵌套編寫層疊樣式杉辙,比如說下面這一段css樣式
#header{color: black; }
#header.navigation{font-size:12px;}
#header.logo{width:300px; }
#header.logo:hover{text-decoration: none;}
而在less中烛芬,我們可以這樣寫
#header{
? ?? color: black;??
? ? .navigation{?
? ?????? font-size:12px;?
? ? }
? ? .logo{
? ?? width:300px;?
? ? }
? ? ? ? &:hover{
? ?????? text-decoration: none;
????????}
}
注意:
&?符號的使用:如果你想寫串聯(lián)選擇器初婆,而不是寫后代選擇器梢灭,就可以用到&了. 這點(diǎn)對偽類尤其有用如?:hover?和?:focus.
例如:
.bordered {
????&.float { float: left; }
????.top { margin: 5px; }
}
less將會輸出如下樣式:
.bordered.float { float: left; }
.bordered .top { margin: 5px; }