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 { }
				}