学习less记录

html代码

<div class="div">    <div class="box"></div>    <div class="box2"></div>    <div class="box3"></div>    <div class="sj_top"></div>    <div class="sj_right"></div>    <div class="sj_down"></div>    <div class="sj_left"></div></div><ul class="list">    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li>    <li><a href="">嵌套规则</a></li></ul>

less代码

@charset "utf-8";html,body{    background:#ccc;}.div{    .of-a;}.f-l{    float:left;}.f-r{    float:right;}.of-h{    overflow:hidden;}.of-a{    overflow:auto;}//变量声明方式：    @变量名:值;@test_width:100px;.box,.box2,.box3{    width:@test_width;    height:@test_width;    background:green;    .f-l}.box{    .border_radius(10px);    .border     }.box2{    .border_radius(10px);    .border2(2px)}.box3{    .border_radius(10px);    .border3}//混合.border{border:solid pink;}//混合带参数.border2(@bd_width){    border:@bd_width solid yellow;}//混合 参数带默认值.border3(@bd_width:1px){    border:@bd_width solid blue;}.border_radius(@radius:5px){    -webkit-border-radius:@radius;    -moz-border-radius:@radius;    border-radius:@radius;}//用css写个三角型.sanjiao{    .f-l;    overflow:hidden;    width:0;    height:0;    border-width:10px;    border-color:transparent transparent red transparent;    border-style:dashed dashed solid dashed}//匹配.sj_top{    .sj(top,10px,red);    .pos(r)}.sj_right{    .sj(right,10px,red);    .pos(f)}.sj_down{    .sj(down,10px,red);    .pos(a)}.sj_left{    .sj(left,10px,red);    .pos(f)}//匹配写上下左右三角型.sj(top,@width:10px,@color:#ccc){    border-width:@width;    border-color:transparent transparent @color transparent;    border-style:dashed dashed solid dashed}.sj(down,@width:10px,@color:#ccc){    border-width:@width;    border-color:@color transparent transparent transparent;    border-style:solid dashed dashed dashed}.sj(left,@width:10px,@color:#ccc){    border-width:@width;    border-color:transparent @color transparent transparent;    border-style:dashed solid dashed dashed}.sj(right,@width:10px,@color:#ccc){    border-width:@width;    border-color:transparent transparent transparent @color;    border-style:dashed dashed dashed solid}//第一个参数是固定的，当调用.sj的时候会自动添加到.sj里.sj(@_,@width:10px,@color:#ccc){    width:0;    height:0;    overflow:hidden;    .f-l}//匹配例子2 定位.pos(f){    position:fixed;}.pos(a){    position:absolute;}.pos(r){    position:relative;}//嵌套规则  .list{    border:1px solid #ccc;    list-style:none;    li{        a{            color:red;            //&代表他的上级元素            &:hover{                color:blue            }        }    }}