less 语法（之一）

<div id="div">
    <span class="span">
            <button class="btn-1"></button>
            <button class="btn-2"></button>
    </span>
</div>    

利用less写css

一下是less写法：

#div{
        color:red;

        .span{
                  border:none;

                  .btn-1, .btn-2{
                              width:70px;
                              height:50px;
                   }

                  .btn-1{
                              background:red;
                 }
                  .btn-2{
                             background:black;
                 }
        }
}                    

 

则它生成相应的css为

#div{
        color:red;    
}

#div .span {
       border:none;
}

#div .span .btn-1, #div .span .btn-2 {
        width:70px;
        height:50px;
}

#div .span .btn-1 {
        background:red;
}
#div .span .btn-2{
        background:black;
}
    

 

 

比较两个文档的差异，用软件beyongCompare，安装后点击文档右键即可