less的嵌套规则

我们可以用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;

        }

}

注意：

& 符号的使用：如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

例如：

.bordered {

    &.float { float: left; }

    .top { margin: 5px; }

}

less将会输出如下样式：

.bordered.float { float: left; }

.bordered .top { margin: 5px; }