小程序應用less（VScode版）

小汪又來啦，這一篇博客小汪寫的是小程序中如何應用less來幫我們快速開發，老規矩若是能幫到小夥伴別忘了點個贊哦。

想必less大家都很熟悉，它的優點有很多，我覺得最大的優點可能就是選擇器嵌套功能了（個人感覺），但是小程序中可以使用less嗎？答案是可以的 。接下來我們看看所需的一些步驟吧：

1. VScode ：有些人喜歡雙編輯器開發，微信開發者工具用來展示效果，VScode用來編輯（我是這麼做的），PS:因爲小程序應用less需要用到VScode的一個插件，但是其他編輯器小汪暫時還沒有去了解，所以暫時就寫這一個吧。
2. .easy Less ：打開VScode Ctrl+Shift+X 打開擴展 搜索到 easy Less進行下載安裝，如圖所示圖（圖內也有步驟）：
   
3. 使用快捷鍵：Ctrl+，（逗號）或點擊左下角齒輪按鈕 打開設置 - 搜索 easy Less config 並選擇 點在setings.json中編輯，如如圖所示（圖內也有步驟）：
   
4. 將以下這一段代碼複製進setings.json中（請注意 //後的註釋，複製進json要刪除）：

	
"less.compile": {
    "outExt": ".wxss" //這裏填寫的字符串是轉譯後的文件後綴，默認則是.css  
},

5. 最後一步在同層級需要使用到less的目錄新建一個XXXX.less文件，按照自己的需求編寫代碼，保存後會自動編譯一個XXXX.wxss文件（如果沒有同名文件則自動創建，有則內容覆蓋） 但注意千萬不要把後綴名寫錯哦！
   （這裏我比較習慣在微信開發者工具創建page，然後在VScode中將XXXX.wxss改名爲XXXX.less，省去創建的步驟）如圖所示（圖內有步驟與效果）：
   

同理 在想編譯css時只要未安裝其他環境如：Gulp / webPack等皆可使用此方法，不是安裝了Gulp / webPack等環境不能使用，只是有了Gulp / webPack這些開發環境，easy Less這個插件就顯得雞肋了點。
好啦，這篇內容到這裏結束，如果有幫助到小夥伴，請小夥伴給小汪多點點支持，點點大拇指即可，我們下篇見。