之前抽空了解了一下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 $