less笔记

koala工具

注释:
    1./**/,可以被编译
    2.//,不可以被编译

申明变量:
    @box_width:300px;
    .box{
        width:@box_width;
    }

混合:
    一:.box{
        .border;
    }
    .border{
        border:5px solid red;
    }

    二:
        @width:100px;
        @height:100px;
    .border:{
            border:5px solid red;
    }
    .box1{
        width:@width;
        height:@height;
        .border;
    }
    .box2{
        .box1;
        background-color:green;
    }

混合可带参数:
        .get_border(@width){
            border:@width solid black
        }
        .box{
            .get_border(1px);
            
        }
混合设置默认参数
        .get_border_default(@width:30px){
            border:@width dash green;
        }
.box{
    .get_border_default();
}


匹配模式:
    .getBjColor(1,@w:300px,@h:300px){
        width:@w;
        height:@h;
        background-color:black;
    }

.getBjColor(2,@w:300px,@h:300px){
        width:@w;
        height:@h;
        background-color:black;
    }

    .getBjColor(3,@w:300px,@h:300px){
        width:@w;
        height:@h;
        background-color:black;
    }
    //不管匹配谁,都需要执行这个方法.
    .getBjColor(@_,@w:100px,@h:100px){
    border-radius: 10px;
    }
    .box3{
        .getBjColor(2);
    }


运算:
    .getWidth(@w){
        width:@w+20px;//这里只要在运算中有一个px就可以.
    }

    .box4{
        .getWidth(80);
        .getBjColor(2);
    }

嵌套:
    .box5{
    border: 1px solid red;
    width: 100px;
    height: 100px;
    
    span{
        display: block;
        height: 50px;
        background-color: yellow;
        
        a{
            font-size: 18px;
            //代表上一层选择器
            &:hover{//伪类
                font-size:20px;
                color:red;
            }
        }
    }
}

@arguments:
    .get_border6(@w,@s,@c){
    border: @arguments;
}
.get_size(@w,@h){
    width: @w;
    height: @h;
}
.box6{
    .get_border6(1px,solid,red);
    .get_size(200px,300px);
}


无法编译:有时候需要一些特殊写法,就会造成less无法变异的问题.比如IE下的*,_还有滤镜.这个时候就无需编译,原样输出

    .box7{
        .get_border6(1px,solid,red);
        .get_size(200px,300px);
        background-color: red;
        opacity: 0.5;
        filter:~"alpha(opacity=0.5)"; //添加~致使无法编译
}


!important:
    .box8{
        .get_border() !important;//这里面所有的属性添加了!important
    }