目前微信小程序不支持sass/less等css预处理工具,习惯了sass写法的我写样式的时候非常头疼,而且像写css一样去写wxss不仅浪费时间耽误效率,写出来的文件也比较大。
一直用的都是sass,下面介绍一下小程序中使用sass的方法。
准备:
- 编辑器:vscode
- 插件:easysass
步骤:
- 安装vscode,vscode中插件选择easysass,可以的话也装一些其他的css提示插件。
- 设置:文件=>首选项=>设置=>工作区=>拓展=>EasySass configuration=>在settings.json中编辑
{
"easysass.formats": [
// { // 生成非压缩css文件,不需要,注释掉就好了
// "format": "expanded",
// "extension": ".css"
// },
{ // 生成压缩格式的css文件,我们需要的是wxss文件,改一下后缀名
"format": "compressed",
// "extension": ".min.css",
"extension": ".wxss"
}
]
}
这样就设置好了。但是需要vscode跟开发者工具来回切换,没有两个显示器的话,应该很不爽。
不过微信开发者工具有一个分离窗口功能
点击之后可以直接将模拟器弹出来,置顶。一个显示器也可以愉快的写代码了。
另外推荐minapp(标签属性补全)wxml(高亮插件)。让微信开发飞起来。