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

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

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入门到上手——前端开发利器<二>深入了解

推荐阅读