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