学习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
            }
        }
    }
}