在微信小程序中使用less/sass

微信小程序中的样式文件wxss等同于css，并不支持less或sass语法。

webstorm本身可以配置less/sass文件监听并同步生成css或wxss。而vscode需要依赖插件，目前有两个插件可用于将less或sass文件生成对应的css或wxss文件，分别是easy less和 easy sass。

相关插件.png

插件使用演示如下：

Easy Less

下载安装了Easy Less 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：

  // 对EasyLess的配置，此段配置去掉则默认生成一个css文件
  "less.compile": {
    "compress": false, //是否压缩
    "sourceMap": false, //是否生成map文件
    "out": true, // 是否输出文件，false为不输出
    "outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
  },

然后在对应的目录下新建一个***.less 文件，如下：

test.less

保存后自动生成的wxss文件如下：

test.wxss

注意：观察两幅图片可以发现，用//注释的语法在css中不支持，会被直接去掉。

Easy Sass

下载安装了Easy Sass 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：

  // 对EasySass的配置，此段配置去掉则默认生成一个css文件和一个压缩的min.css文件
  "easysass.formats": [
    {
      "format": "expanded", //格式，expanded不压缩，compressed压缩
      "extension": ".wxss" //输出文件的后缀,小程序可以写'wxss'
    },
    // {
    //   "format": "compressed",
    //   "extension": ".min.css"
    // }
  ],

相对于前者，EasySass支持一次多生成几种类型的文件，在配置数组里如上多写几个就行了。

我们新建一个sass文件，如下：

test.scss

保存后vscode控制台输出会有提示文件的生成。生成的wxss文件如下：

test.wxss

注意：与easyLess生成的文件对比，会发现多了一个字符集的指定@charset "UTF-8";。同样//的注释被去掉了。

这样，就可以愉快得用less和sass写小程序啦,是不是真的很easy！！！