1.下载koala客户端，可以设置语言

2.用koala打开一个有.less文件的文件夹，点击.less文件,点击执行方式，出现success表示绑定less文件成功，编译.less时会自动生成对应名称的css文件，html引入时引入css文件，维护时是维护less文件

3.less语法

1⃣️注释
	/**/会在css中显示
	//不会在css中显示
	
2⃣️变量
	定义：@变量名：值     --------值不加‘’，像素记得带单位
	使用：@变量名
	
3⃣️计算
	定义 @h = 16px
	使用：height:@h;
		    line-height:@h+5
		    
4⃣️继承  &表示父级标签
	.less文件
			ul{
				& li{
					& span{
					}
				}
			}
			
	.css文件结果
			ul {	}
			ul li {	}
			ul li span {	}
			
5⃣️混合方法
	eg1:不加括号（混合方法也会出现在css文件中）
		.less文件
				.bg{
					background-color:red;
				}
				.box{
					.bg;
					width:100px;
					height:100px;
				}
				
		.css文件
				.bg{
					background-color:red;
				}
				.box{
					background-color:red;
					width:100px;
					height:100px;
				}
	
	eg2:加括号（混合方法不会渲染在css文件中）
		.less文件
				.bg(){
					background-color:red;
				}
				.box{
					.bg();
					width:100px;
					height:100px;
				}
				
		.css文件
				.box{
					background-color:red;
					width:100px;
					height:100px;
				}
	eg3:传参数
		.less文件
				.bg( @h,@w,@color:red){
					background-color:red;
					width:@w;
					height:@h;
				}
				.box{
					.bg(100px,50px);
				}
				
		.css文件
				.box{
					background-color:red;
					width:100px;
					height:50px;
				}
	eg4:获取全部参数
		.less文件
				.margin( @t,@r,@b,@l){
					margin:@arguments;
				}
				.box{
					margin(10px,15px,10px,15px);
				}
				
		.css文件
				.box{
					margin:10px 15px 10px 15px;
				}
6⃣️匹配模式
	▶️传参个数匹配
	▶️根据传入的值匹配
		.less文件
			.border(top,@color){
				border-top:1px solid @color;
			}
			.border(bottom,@color){
				border-bottom:1px solid @color;
			}
			.border(@_,@color){
				margin:10px
			}
			.div{
				.border(top,#fff);
			}
			
		.css文件
			.div{
				border-top:1px solid @color;
				margin:10px;
			}

7⃣️媒体查询	
	.less文件
		.content{
			& .image{
				@media screen and (max-width:370px){
				}
			}
		}
		
	.css文件
		.content { }
		.content .image { }
		@media screen and (max-width:370px){
			.content .image { }
				}