Less 的使用心得

1、html代码如下

<div class="order2">      我是订单页面      <ul class="list">          <li><a href="#">测试的嵌套<span>   2017-08-16</span></a></li>          <li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>          <li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>          <li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>          <li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>          <li><a href="#">测试的嵌套<span>    2017-08-16</span></a></li>      </ul>      <div class="sanjiao"></div>      <div class="box_03"></div>  </div>

2、css 代码如下：

<style scoped lang="less">/**1、变量的使用*/// 1、less中的变量，例如：width: @test_width;变量的使用@test_width: 100%;.order {    margin-top: 100px;    width: @test_width;    height: 100px;    line-height: 100px;    background-color: red;    // .border;    .border_02(30px);}/**2、混合的使用*/// 2、less中的混合;例如：.border; 具体的使用.border{    border: solid 5px pink;}// less中混合的使用，具有order的所有属性，可以在添加额外的属性，例如：margin-left: 100px;.order2{    .order;    margin-left: 10px;}// less中的混合 是可以带参数的.border_02(@border_width){    border: solid yellow @border_width;}// 混合例子 带参数.test_hunhe{    .border_02(30px);}// 混合设置默认值，而且有参数; 10px是默认值.border_03(@border_width:10px){    border: solid green @border_width;}// 使用混合默认值.test_hunhe_03{    .border_03();}/**3、匹配的使用*/.sanjiao{    // width: 0;    // height: 0;    // overflow: hidden;    // border-width: 10px;    // border-color: red transparent transparent transparent;    // border-style: solid dashed dashed dashed;    .trianle(top); // 匹配的使用}// 通过匹配 实现三角 上下左右.trianle(top,@w:5px,@c:#ccc){    border-width: @w;    border-color: @c transparent transparent transparent;    border-style: solid dashed dashed dashed;}.trianle(bottom,@w:5px,@c:#ccc){    border-width: @w;    border-color: transparent transparent @c transparent;    border-style: dashed dashed solid dashed;}.trianle(left,@w:5px,@c:#ccc){    border-width: @w;    border-color: transparent @c transparent transparent;    border-style: dashed solid dashed dashed;}.trianle(right,@w:5px,@c:#ccc){    border-width: @w;    border-color: transparent transparent transparent @c;    border-style: dashed dashed dashed solid;}// 无论匹配上面的四个方向的那个方向，都要带上下面这个.trianle(@_,@w:5px,@c:#ccc){    width: 0;    height: 0;    overflow: hidden;}// 匹配模式定位 定位例子.pos(r){    position: relative;}.pos(a){    position: absolute;}.pos(f){    position: fixed;}.pipei{    width: 200px;    height: 200px;    background-color: green;    .pos(r);}/**4、less中的运算使用*/@test_01:300px;.box_03{    width: (@test_01 - 200)*2;    height: 100px;    background-color: green;}/**5、less中的嵌套*/.list{    width: 600px;    margin: 30px auto;    padding: 0;    list-style: none;    li{        height: 30px;        line-height: 30px;        background-color: pink;        margin-bottom: 5px;    }    a{        float: left;        // & 代表上一层选择器        &:hover{            color:green;        }    }    span{        float: right;    }}/**6、less中的避免编译  width: calc(300px-30px); 会直接算出来*/// 避免运算 ~'calc(300px-30px)';.test_06{    width: ~'calc(300px-30px)';}</style>