@charset "utf-8";

// @import "filename"; 导入less文件
// @import (less)"filename.css"; 导入css文件
body{
    background: #dedede;
}

.title{
    text-align: center;
    font-size: 20px;
    color:#000;
    width:@md_width;
    .border;        //调用混合
}

//测试注释
//变量
@max_width:900px;
@md_width:600px;
@min_width:300px;

//混合
.border{
    border:solid 1px blue;
}

ul{
    li{
        width:600px;
        height: 20px;
        background: #FFF;
        .border;
    }
    margin-left: 20px;
}

//混合-参数
.border_2(@border_width, @border_color){
    border:solid @border_color @border_width;
}

.test_border_2{
    .border_2(#eee,50px);
}

//混合-默认值
.border_3(@border_width:10px){
    border:solid green @border_width;
}

.test_border_3{
    .border_3();    //默认10px
    .border_3(30px);        //传参
}

// 混合的例子
.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border_radius:@radius;
    border-radius: @radius;
}

.test_radius{
    width:@md_width;
    height: 300px;
    .border;
    .border_radius(60px);
}

//写一个三角
.sanjiao{
    width:0;
    height: 0;
    overflow:hidden;
    border-width:10px;
    border-color:transparent transparent red transparent;
    border-style: dashed dashed solid dashed;
}

// margin 匹配
.mg(right,@width:10px){
    margin-right:@width;
}
.mg(left,@width:10px){
    margin-left: @width;
}
.mg(top,@width:10px){
    margin-top: @width;
}
.mg(bottom,@width:10px){
    margin-bottom: @width;
}
.mg(@_,@width:10px){
    text-align: center;
}
.test_border_2{
    .mg(left,150px)
}

// 运算
@jisuan:300px;
.box{
    width:@jisuan - 100;
    background: #FFF;
    height: 40px;
    .border;
}

// 匹配
.list{
    width:@md_width;
    li{
        height: 20px;
        line-height: 20px;
        .mg(top);
        padding:0 10px;
    }
    a{
        float: left;
        //& 它的上层选择器
        &:hover{
            color:#F60;
        }
    }
    span{
        float: right;
    }
}

// 避免编译
.test_03{
    width:~'calc(300px-30px)';
}

// 避免 important
.test_important{
    // .border_3() !important;
}