微信小程序中的樣式文件wxss等同于css，并不支持less或sass語法。
相關(guān)插件.png
插件使用演示如下：
Easy Less
下載安裝了Easy Less 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：
// 對EasyLess的配置，此段配置去掉則默認(rèn)生成一個css文件
"less.compile": {
"compress": false, //是否壓縮
"sourceMap": false, //是否生成map文件
"out": true, // 是否輸出文件，false為不輸出
"outExt": ".wxss", // 輸出文件的后綴,小程序可以寫'wxss'
},
然后在對應(yīng)的目錄下新建一個***.less 文件，如下：
test.less
保存后自動生成的wxss文件如下：
test.wxss
注意：觀察兩幅圖片可以發(fā)現(xiàn)，用//注釋的語法在css中不支持，會被直接去掉。
Easy Sass
下載安裝了Easy Sass 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：
// 對EasySass的配置，此段配置去掉則默認(rèn)生成一個css文件和一個壓縮的min.css文件
"easysass.formats": [
{
"format": "expanded", //格式，expanded不壓縮，compressed壓縮
"extension": ".wxss" //輸出文件的后綴,小程序可以寫'wxss'
},
// {
// "format": "compressed",
// "extension": ".min.css"
// }
],
相對于前者，EasySass支持一次多生成幾種類型的文件，在配置數(shù)組里如上多寫幾個就行了。
我們新建一個sass文件，如下：
test.scss
保存后vscode控制臺輸出會有提示文件的生成。生成的wxss文件如下：
test.wxss
注意：與easyLess生成的文件對比，會發(fā)現(xiàn)多了一個字符集的指定
@charset "UTF-8";。同樣//的注釋被去掉了。
這樣，就可以愉快得用less和sass寫小程序啦,是不是真的很easy?。?！
