less方法

less定义变量

1. Less定义变量时使用前缀：@

@color: #4D926F;

// 编译后
header {
color: @color;
}

2. 带参数

语法：类的名称（形参）{}

.wh (@a,@b) {  
		width: @a;
		height: @b;
}

// 编译后    
div{
	.wh(20px,20px)
}

3. 父元素选择器&

.bgcolor{
    background: black;
    a{
        color:#fff;
        &:hover{
            color:blue;
        }
    }
}

//也可以用这个
.contain{
    &>p{
        color:red;
    }
    &+.contain{
        background-color: black;
    }
    & div{
        width: 300px;
    }
}

4. 改变选择器的顺序&

.contain{
 h1&{
     width:200px;
     height:300px;
 }
}

#son{
 ul{
     li{
         .contain&{
             height:100px;
             background-color: #fff;
         }
     }
 }
}

编译后

h1.contain {
 width: 200px;
 height: 300px;
}
.contain#son ul li {
 height: 100px;
 background-color: #fff;
}