接着昨天的继续... ...

4、嵌套：

HTML部分

    <table>        <tr>            <th colspan="3">测试列表标题</th>        </tr>        <tr>            <td>测试文字</td>            <td>测试文字</td>            <td>测试文字</td>        </tr>        <tr>            <td>测试文字</td>            <td>测试文字</td>            <td>测试文字</td>        </tr>        <tr>            <td>测试文字</td>            <td>测试文字</td>            <td>测试文字</td>        </tr>    </table>

View Code

less部分

table{    width:80%; margin:30px auto;    /* 嵌套 */    tr{        th{ color:blue; font-size:32px;            &:hover{ background-color:#FFF; };        }    }    /* &类似this，指向父级选择器 */    tr{        &:hover{ background-color:#808080; }        td{ text-align:center; }    }}

嵌套模式更贴近html的层级关系。编写起来更方便。

5、避免编译：

有时候，我们在编写css 的时候希望在页面中计算，比如css3的 calc();

.box{    width:calc(300px - 50px);}

这里被编译后的css就直接把结果算出来了。.box{width:calc(250px)}

然而这时我们不希望在css里面就算出结果，这是就需要用到less里面的避免编译。

.box{    width:~‘calc(300px - 50px)‘;}

加上~“”后，引号内的代码less就不会去计算了。(注：这里用单引双引无所谓)

************************************************************************************************************

到这里less一些常用的特性和语法就介绍完了，如果对less有兴趣进一步研究的可以去官网看看帮助文档。

Less入门到上手——前端开发利器<二>深入了解