Less嵌套功能

Question

<div class="test">

    <div class="test1">

        <div></div>

    </div>

</div>

通常我们要给上面这三个div写样式，无非用2种方法，一种就是定义class/id，一种就是给最外层定义个class/id，然后用继承去写。而LESS CSS给了我们一种友好阅读的方式

.test{

    .margin10;

    @color:#4d926f;

    width:@w100 + 100px;height:100px;border:1px solid red;background:@color;

    &:hover,&.selected{background-color:#FFF}

    /*嵌套*/

    .test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;

        /*多重嵌套*/

        div{width:100%;height:50px;background-color:#9F0;}

    }

    .test1:hover{background-color:@color}

}

总的来说，LESS CSS不是很适合用在项目中，它更适用于皮肤、模板等整体框架固定死的网站制作，比如论坛、空间。