如何在微信小程序中使用sass来编写wxss代码

之前抽空了解了一下sass这门css扩展语言，感觉很nice，不过由于我主要是做小程序的，所以我也花了些时间研究如何在微信小程序中使用sass来编写微信小程序的wxss。下面就介绍一下如何在微信小程序中使用sass来编写wxss代码。

第一种，使用编辑器进行编译，例如webstrom

目前市面上绝大多数的编辑器都提供了对sass编译的支持，你只需要做一些简单的配置即可实时监听sass文件的改动，从而实时进译成css文件，在这里我以webstrom为例，介绍一下如何用编辑器编译sass进行开发。ps：每种编辑器如何配置可能都不一样，其他的编辑器可能需要各位自行搜索相关教程。

webstorm很强大，如果你一直是使用webstorm来进行代码编写，那么使用它将sass文件编译成一个wxss文件自然不在话下了，不过前期还是需要一些准备工作的：

（1）添加支持微信的wxss文件

微信小程序的wxss文件其实和css文件是一样的，语法上其实也没啥区别，那么可以将wxss文件设置成如同css文件一样的语法格式和代码高亮即可。

找到：FIle => settings => Editor => File and Code Templates  

找到files，简单点，直接点击CSS File，然后复制一个，再改个名称和后缀名即可：

改完后缀名后，你就得到了一个拥有和css一样的语法高亮和提示的wxss文件的支持，然后如何安装sass就不说了，而且，使用node命令行进行直接编译sass也不说了，我们这里直接说一下每次修改完sass文件后并保存时，如何将其直接编译成wxss吧。

（2）编译sass文件

找到：FIle => settings => Tools => File Watchers

 双击打开进入编辑页面：

Arguments输入的命令是： --update --no-source-map  $