LESS 相关知识点(Variable、Mixins、Function、Nesting、Scope、Operation)

Variable：预定义变量

@width：10px;
@height:@width+10px;
#header{
	width:@width;
	height:@height;
}

output(输出):

#header{
	width:10px;
	height:20px;
}

Mixins 不需要每个地方都写全路径（通过继承关系）

#button{
	background-color:#fff;
	border-radius:7px;
}
#sbutton{
	width:150px;
	height:80px;
	#button;
}

output(输出):

#button{
	background-color:#fff;
	border-radius:7px;
}
#sbutton{
	width:150px;
	height:80px;
	background-color:#fff;
	border-radius:7px;
}

Function:

#button(@width:150px){
	background-color:#fff;
	border-raduis:7px;
	width:@width;
}
#sbutton{
	height:80px;
	#button;
}
#mbutton{
	height:120px;
	#button;
}

output(输出):

#sbutton{
	height:80px;
	background-color:#fff;
	border-radius:7px;
	width:150px;
}
#mbutton{
	height:120px;
	background-color:#fff;
	border-radius:7px;
	width:150px;
}

Nesting:修改时会有元素之间的继承关系

@color:blue;
ul{
	color:red;
	li{
		color:yellow;
	}
}

output(输出):

ul{
	color:red;
}
ul li{
	color:yellow;
}

Scope:变量有效问题

@color:blue;
ul{
	@color:white;
	color:red;
	li{
	color:@color;
	}
}

output(输出):

ul{
	color:red;
	ul li{
	color:white;
	}
}

对比：

@color:blue;
ul{
	@color:white;
	color:red;
}
li{
	color:@color;
}

output(输出):

ul{
	color:red;
}
li{
	color:blue;
}

Operations:相对变化

注意：+、-、*、/均可

@color:blue;
@size:14px;
ul{
	@color:white;
	color:red;
	li{
	color:@color;
	font-size:@size+2;
	}
}

output(输出):

ul{
	color:red;
}
ul li{
	color:white;
	font-size:16px;
}

eg2：

@var:#ff5500;
div{
	background-color:@var;
	&:hover{
	background-color:fadeout(@var,20%);
	}
}

output(输出):

div{
	background-color:#ff5500;
}
div:hover{
	background-color:rgba(255,85,0,0.8);
}