如何用SCSS编写微信小程序，实现高效样式管理？

本文共计1023个文字，预计阅读时间需要5分钟。

微信小程序的wxss、支付宝小程序的acss等语法与原生CSS相似，但在Web开发中更倾向于使用动态CSS语言。然而，重新使用原生CSS时，往往不习惯其用法，尤其是父子样式的嵌套写法相当繁琐。

微信小程序的wxss、阿里旗下淘宝、支付宝小程序的acss等等语法很类似原生css，但是在web开发里用惯了动态css语言，再写回原生css很不习惯，尤其是父子样式的嵌套写法非常繁琐。

因此，我希望能有一个自动化构建方案，能够简单地将scss转换成小程序的样式语言。

方案1

以前写微信小程序的依赖库时用过，使用gulp编译，将源码和编译后的代码分别放到src和dist两个目录。gulp会处理src下面的所有文件，将其中的scss转换成css，并将其他所有文件原封不动挪到dist下相应位置。

这里就不详细说了，代码参考Wux。

方案2

非常简单直接，使用Webstorm/IDEA的File Watchers功能实时转换。

安装Ruby和sass

确保命令行输入sass -v能出现版本号，安装过程略。

安装File Watchers

到插件市场上搜索并安装（已安装则跳过）

添加scss的转换脚本

现在安装完插件打开项目会自动弹出scss转css的向导，方便了很多。