【less的使用】

<style lang="less" scoped>
//一、变量
//变量用作值    语法：@变量名: 值;  eg： @color:red;
	@color:red;
	.box{
	    color: @color;
	}
//变量用作属性名		 语法：@变量名: 属性名; eg： @bg-color:background-color;
	@bg-color:background-color;
	.box{
		@{bg-color}:pink
	}
	
//变量用作链接	
	@bg-img:"@/assets/logo.png";
	.box_1{
		width: 300px;
		height: 300px;
		background:url(@bg-img) no-repeat center;
	}
	
//二、混合
	//1、.box_2引入.bor
	.bor{
	    background-color: aqua;
	    width: 32rpx;
	}
	.box_2{
	    color:white;
	    .bor;
	}
	
	
	//2、带选择器的混合	语法：{&：选择器};
	.father(){
	    &:hover{
	        background-color: pink;
	        font-size:32px;
	    }
	}
	.child{
	    .father;
	}
	
	//3、带参数的混合   语法：类的名称（形参）{};
	.son(@color,@bgColor){
		color:@color;
		background: @bgColor;
	}
	.dad{
	    .son(red,yellow);//需要传参数进去
	}
	
	
</style>