less编译使用

@charset "utf-8";
//注释内容--单行注释
/* 注释内容--多行注释*/
// @import "reset.css";
// @import url(reset.css);
@import url("reset.css");

// 变量
@col: #f0f;
@le: left;
// 作为属性值引用
.box{
    width: 100px;
    height: 100px;
    background: @col;
}
//作为属性名称引用：
.box{
    // border-left: 5px dotted #000;
    border-@{le}: 5px dotted #000;
}
//作为选择器名称引用：
// .left{ }
.@{le}{
    height: 50px;
    background: yellow;
}

// 混入
// 1、混入类名
.bw{
    width: 300px;
}
.bBor(){
    border: 5px solid #000;
}
.wrap{
    .bw;
    .bBor;
    height: 50px;
    background: pink;
}
//2、混入参数
    //不带默认值的混入
.boRa(@radius){//@radius形参  
    border-radius: @radius;
}
.wrap2{
    width: 200px;
    height: 200px;
    background: @col;
    .boRa(50px);//50px 实参    @radius: 50px;
    .boRa(20px);//@radius: 20px;
    // .boRa;
}
    //带默认值的混入
.bh(@bheight:50px){
    height: @bheight;
    background: @col;
    border-top: 2px solid #000;
}
.wrap3{
    .bh;
    .bh(100px);//@bheight: 100px;
}
    //使用@arguments引用所有的传入的参数
.boSha(@bx,@by,@bb,@bc){
    box-shadow: @arguments;
}
.bo(@bwi:10px,@bs:solid,@bcol:#0f0){
    border: @arguments;
}
.wrap3{
    .boSha(10px,10px,20px,#000);
    // .boSha(10px,20px,#000);
    .bo;
    .bo(5px);
    .bo(5px,dotted);
    .bo(5px,dashed,#000);
    // .bo(#f00);
}

//嵌套：
    //选择器嵌套
.wrap4{
    background: yellow;
    h3{
        font: 30px "微软雅黑";
        color: @col;
    }
    .box{
        background: pink;
        h4{
            font-size: 20px;
        }
        p{
            font-size: 20px;
            color: blue;
            a{
                color: yellow;
                &:hover{
                    color: red;
                }
            }
            &:hover{
                a{
                    background: #fff;
                }
            }
        }
    }
}

//继承
.ftStyle{
    font-style: italic;
}
/*
.wrap5{
    h3{
        font-size: 50px;
        &:extend(.ftStyle);
    }
}
*/
.wrap5{
    h3:extend(.ftStyle){
        font-size: 50px;
    }
}

//运算：
    //变量运算、数值运算
@wi: 100px;
.wrap6{
    width: @wi + 100;
    height: 200px - 100;
    background: yellow;
}
    //颜色色值运算
.wrap6{
    background: #000 + 20;//#000--rgb(0,0,0) + 20 --rgb(20,20,20)-- #141414
    background: #000 + 300;
    background: #000 - 300;
}