less笔记

less注释

/**/会在编译的时候加入到.css文件中
// 不会编译到.css文件中

 

less变量

@width:200px;

less混合

.red{background:red;}
.box{
    width:200px;
    height:200px;
    .red;
}
编译的结果：
.box{
    width:200px;
    height:200px;
    background:red;
}

混合-带参数

.border(@border_width){
    border:solid red @border_width;
}
.box{
    width:200px;
    height:200px;
    .border(5px);
}
编译的结果：
.box{
    width:200px;
    height:200px;
    border:solid red 5px;
}

混合-默认带值

.border(@border_width:10px){
    border:solid red @border_width;
}
.box{
    width:200px;
    height:200px;
    .border(); //也可以最近传值，如：.border(20px);
}
编译的结果：
.box{
    width:200px;
    height:200px;
    border:solid red 10px;
}

混合例子

.border-radius(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .border-radius(5px);
}
编译的结果：
.box{
    width:200px;
    height:200px;
    background:red;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

less匹配模式

.pos(r){
    position:relative;
}
.pos(a){
    position:absolute;
}
.pos(f){
    position:fixed;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .pos(r);
}

编译的结果：
.box{
    width:200px;
    height:200px;
    background:red;
    position:relative;
}

less运算

@width:200px;
.box{
    width:@width - 100; //可加减乘除
}
编译的结果：
.box{
    width:100px;
}

less嵌套规则

.box{
    width:200px;
    height:200px;
    background:red;
    li{
        background:#000;
    }
}
编译的结果：
.box{
    width:200px;
    height:200px;
    background:red;
}
.box li{
    background:#000;
}

a{
    color:#000;
    &:hover{ //&代表上一层
        color:red;
    }
}
编译的结果:
a{
    color:#000;
}
a:hover{ 
    color:red;
}

less @arguments变量

.border_arg(@w,@c,@type){
    border:@arguments;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .border_arg(3px,red,solid);
}
编译的结果:
.box{
    width:200px;
    height:200px;
    background:red;
    border:3px red solid;
}

less避免编译

.box{
    width:~'cale(300px - 30px)'
}
编译的结果:
.box{
    width:cale(300px - 30px);
}

less !important

.red{color:red}
.box{
    .red !important;
}
编译的结果:
.box{
    color:red !important;
}