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

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

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

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

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

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

7.找到：FIle=settings=Editor=FileandCodeTemplates

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

9.但是，我说了，这种方法最好不用，因为万一出现非预期的编译情况，我救不了你。

10.然后bat中只需要以下简单的代码即可：

@echooffchcp65001sass--update--no-source-map./:./echoon

11.选择以上三种方法中的其中一种，把其中的bat代码复制下来，粘贴到你新建的与app.js同级的那个bat文件中，然后你在页面中新建一个sass文件，就可以测试了（记住，要编译，需要手动自己点击编译按钮）

12.其实，微信小程序开发者工具的自定义预处理命令很有用，比如你可以使用他自己自定义babel命令进行es6转es5的工作，如果你觉得微信小程序自己的babel命令不够用的话。

13.其实你也可以直接使用sass的watch命令直接进行sass文件的更改监听来编译，各位可以自行实验一下，而且，你还可以使用Koala这种官方推荐的编译工具进行编译，方法有很多的。

14.三.一些使用sass时的问题

15.我在微信小程序自己尝试使用sass时，还是遇到了一些麻烦，比如：

16.1.使用sass时，我在使用iconfont字体图标的Unicode方式的字体图标引用时，sass在编译时他会把content中的进行转义，导致字体图标无法正常使用。比如：

17..icon-fanhui:before{content:"e671";}这一句，如果放在sass文件中时，会把他转为：.icon-fanhui:before{content:"";}，"e671"被转义为一个口，或者其他字符。很难受。如果还是要使用字体图标的话，我建议把单独的字体图标样式拿出来直接放在.wxss文件中，然后在app.scss中使用@import语法直接导入那个字体图标的wxss文件即可，反正字体图标一般不需要sass编译。或者使用字体图标的其他的方式。不要使用Unicode的方式。

18.2.由于一般每个微信小程序的page中wxss都是分开在每个页面中的，如果这时候引用sass公共定义的mixin，函数，变量这些，就都每个页面的sass文件要引用一次，而且最低每个页面的sass都要最少导入一个文件，感觉有点麻烦，不过还可以接受吧。

19.3.而且，sass的@import和微信wxss的@import是冲突的语法，也就是，你想在scss文件中，使用@import导入一个普通的wxss文件，这时候，sass会把这个@import导入的wxss作为需要编译的文件进行导入编译，导致报错。因为sass的@import语法只有导入.css为后缀的文件才会忽略他，把他作为一个css的@import语法，那么这个问题该如何解决呢？

20.问题3解决：

21.还是修改sass.dart.js文件，但是这次只是给sass编译增加一个判断条件：让sass的@import语法在遇到.css或者.wxss文件结尾时，都作为普通的css@import语法，不对其进行编译。那如何修改？如下：

22.打开sass.dart.js文件，搜索.css关键字，找到类似于一个判断的语法：

23.之前的代码是这样的：

if(C.b.cz(a,".css"))return!0

24.修改后是这样的：

if(C.b.cz(a,".wxss")||C.b.cz(a,".css"))return!0

25.也就是多了一个判断是不是.wxss为后缀的文件，并且，测试后发现没有什么问题，算是可以解决问题3。并且，此处源代码的改动不像改变编译时的那样改动这么危险，这里仅仅是增加了一个@import语法的判断，所以，此处的sass源码改动比改动编译时的文件后缀安全许多，可以使用。

26.总结

27.小程序中使用sass时，也许你会遇到其他问题，不过想要真正在一种别人不支持sass的框架中使用sass，还是需要克服这些困难的，所以，记得使用之前认真考虑一下利弊。其实，这么看的话，其他的css预处理语音，其实也可以在微信小程序中使用，比如less等等，也许你会遇到其他问题，不过，在你想要超脱于标准之外的同时，这些问题同样都是需要你去面对的。