less学习笔记：基础语法

基础语法

一 注释

//注释
//这条注释不会被编译到css
/*这条注释会被编译到css*/

二 变量

@backcolor:#000;
@font:14px;
.a{
    background-color: @backcolor;
    font-size: @font - 1;
}

三 调用

//调用（类似函数）
.a{
    height: 100px;
}
.b{
    width: 100px;
    .a;
}

//二 调用带参数
.blue_border(@width){
    border: @width solid blue;
}
.newborder{
    .blue_border(1px);
}

//三 调用带参数（有默认参数）
.red_border(@width:10px){
    border: @width solid red;
}
.newredborder{
    .red_border();
}
.newredborder2{
    .red_border(5px);
}

四 匹配模式(定义参数，调用函数时匹配参数)

.fn(one){
    width: 10px;
    height: 10px;
}
.fn(two){
    width: 20px;
    height: 20px;
}
.fn(three){
    width: 30px;
    height: 30px;
}
.newFn{
    .fn(one);
}

五 运算

@ysa:100px;
@ysb:200px;
.a{
    width: @ysa + 10;
}
.b{
    width: @ysa - @ysb;
}
.c{
    width: @ysa * @ysb;
}
.d{
    width: @ysb / @ysa;
}

六 嵌套(ul >li >span >a)

ul{
    list-style: none;
    width: 100px;
    position: relative;
    li{
        width: @ysa;
        span{
            display: inline-block;
            a{
                color: #fff;
            }
        }
    }
}
//&符表示上一级的选择器  这里的&表示li
ul{
    list-style: none;
    li{
        width: @ysb;
        &:hover{
            color: #000;
        }
    }
}

七 @import

//a.less
//.a{
//    width:100px;
//}
//@import "a.less"  或者    @import "a"