黑马程序员技术交流社区

标题: 【上海校区】如何在微信小程序中使用sass来编写wxss代码 [打印本页]

---

作者: 不二晨    时间: 2018-12-28 11:32
标题: 【上海校区】如何在微信小程序中使用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  $FileName$:$FileNameWithoutExtension$.wxss

注意，我这里使用了--no-source-map，不会产生map文件，如果想要的话，你可以去掉这个命令。这里的$FileName$和$FileNameWithoutExtension$是webstrome自带的变量，前者是监听文件的文件名（带后缀），后者是不带文件后缀的文件名。这样其实你可以使用这些webstrom定义的一些变量来很自由的进行sass命令的执行。

然后点ok即可。这样，每次他自动保存或者你手动保存时，都会重新将这个你保存的sass文件给编译成wxss文件。

ps：其他的例如vscode等一些编辑器也可以这样做，不过具体的方法我就不知道了。各位可执行搜索资料。

第二种，使用微信开发者工具

有时候啊，你可能用的不是这种重量级的编辑器，用的是比较轻量的比如sublime这种（它应该也可以进行自动编译的配置，不过我不会），或者你是直接使用微信小程序开发工具进行小程序的开发，那么如果想要使用sass来编写样式，那如何让sass文件自动编译呢？

ps：这一种完全是自己想要研究所以才想到的办法，但是真正开发的时候这个就很鸡肋，为什么？因为小程序开发者工具自我发布这篇文章之时，还无法支持打开sass文件，既然无法打开，那么如果你还想要用sass编写wxss，肯定是要用其他编辑器编写的，那何不直接用你的编辑器进行编译，岂不更好？当然，如果你用的编辑器真的无法编译sass（比如记事本），那么你可以用这种。

你可以使用微信小程序开发工具的自定义处理命令来在小程序每次编译之前，编译sass文件为wxss，如图：



自定义处理命令的使用劳烦看微信官方文档：https://developers.weixin.qq.com ... 4%E5%A4%84%E7%90%86

而我们在这里要做的其实就是让微信开发工具在编译器编译小程序之前进行一次sass文件转wxss文件的处理。而命令使用shell进行工作，在windows下的bat命令该如何编写呢？（mac我并没有，所有没有研究）

绞尽脑汁，总结了一下几种可行的几种命令方法：

1.使用sass官方命令编译整个文件夹的命令，但是这个命令只能编译出css文件，而无法指定编译后的文件的类型，所以，还需要增加一个修改文件后缀名的命令，把编译出来的.css后缀的文件更改为.wxss文件后缀。


2.遍历你项目的所有文件夹，找到后缀为.scss的文件，单独编译为wxss（可以指定文件后缀），但是要还需要判断以_开头的sass文件，因为按照约定，_开头的scss文件应该忽略它。（这里很难受，命令写的有问题，放弃了）


3.更改sass编译源码，搜索.css后缀，改为wxss后缀  （一个函数，有很多null的参数的那个），让他默认编译出来的就是wxss后缀的文件，那么就可以简单的使用官方sass命令编译整个文件夹了（不可取，因为你改源码，你只知其一，不知其二，所以，在不了解源码的情况下很可能有其他安全隐患，万一出了错，没人能帮你，虽然我测试的时候没什么问题）。

不过该说的办法还是要说的，首先，你可以新建一个bat文件，然后把这个bat文件放入和app.js同级的那个目录，再在上图的编译前预处理那里输入那个bat文件的名字。ps：你保存文件之后，需要手动点击微信开发者工具的编译命令才会执行你设置的自定义处理命令，这是微信的硬性要求，没办法。

第一种bat命令：

@echo off
chcp 65001
sass --update --no-source-map ./:./ && for /f "delims=" %%a in ('dir /a-d /s /b') do (if "%%~xa" == ".css" del /a /f /s /q "%%~na.wxss" && ren "%%~fsa" "%%~na.wxss")
echo on
第二种bat命令（执行结果是非预期的，所有只是贴出来，请不要使用，或者，各位可以自行研究，看是不是我写的命令有误）

@echo on
chcp 65001
SETLOCAL ENABLEDELAYEDEXPANSION
for /f "delims=" %%a in ('dir /a-d /s /b') do (
set var=%%~na
if "%%~xa" == ".scss" if not !var:~0,1!==_ sass   --update --no-source-map %%~dpa%%~na.scss %%~dpa%%~na.wxss)
)
echo on
第三种方法，找到你全局安装的sass，找到一个名为：sass.dart.js。如果你的node是默认安装，那么你下载的sass包一般会在这：C:\Users\Administrator\AppData\Roaming\npm\node_modules\sass。你在这个路径下就可以找到这个sass.dart.js文件，然后你需要搜索这个文件，搜索.css，他是一个有很多null参数的一个函数的那一个地方。修改.css为.wxss即可，其他不需要动。（ps：每个人下载的sass，查找到的地方可能不一样，所以......，我找到的长这样）



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

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

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

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

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

三.一些使用sass时的问题

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

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

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

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

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

问题3解决：

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

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



之前的代码是这样的：

if(C.b.cz(a,".css"))return!0
修改后是这样的：

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



总结

小程序中使用sass时，也许你会遇到其他问题，不过想要真正在一种别人不支持sass的框架中使用sass，还是需要克服这些困难的，所以，记得使用之前认真考虑一下利弊。其实，这么看的话，其他的css预处理语音，其实也可以在微信小程序中使用，比如less等等，也许你会遇到其他问题，不过，在你想要超脱于标准之外的同时，这些问题同样都是需要你去面对的。
---------------------
转载，仅作分享，侵删
作者：qq_33024515
原文：https://blog.csdn.net/qq_33024515/article/details/85100597

---

作者: 不二晨    时间: 2019-1-3 10:21
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2