用SCS开发小程序(各种小程序平台通用)

微信小程序的wxss、阿里的淘宝、支付宝小程序的acss等语法都和原生css非常相似，但是在web开发中，我们习惯了动态css语言，然后不习惯回写原生css，尤其是父子嵌套编写非常繁琐。

所以我希望有一个可以简单的把SCS转换成小程序风格语言的自动构建方案。

方案1

之前，写微信小程序依赖库的时候用。它是由grave编译的，源代码和编译后的代码分别放入src和dist目录。glow将处理src下的所有文件，将SCS转换为css，并将所有其他文件原封不动地移动到dist下的相应位置。

这里就不细说了。代码指的是Wux。

方案2

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

安装Ruby和sass

确保在命令行输入sass -v时可以出现版本号，并省略安装过程。

安装文件观察器

在插件市场中搜索并安装(如果已安装，请跳过)

添加scss的转换脚本

现在安装完插件，打开项目后，会自动弹出SCS转css向导，方便多了。但是，需要进行一些修改。配置如下：

首先，更改生成文件的后缀名称。比如这里我的淘宝小程序必须是acss。

其次，将参数更改为：

$ filename $ : $ filename with extension $。acss-no-cache-source map=none-default-encoding UTF-8-style扩展拷贝代码，如果不添加no-cache，a. sass-cache目录将出现在scss文件的同一目录中。

如果没有-sourcemap=none，则. map文件将出现在与SCSS文件相同的目录中。

如果-default-encoding UTF-8没有被添加，SCSS文件将报告一个错误，如果它有中文注释转换。

不需要添加样式。这里使用了没有缩进和压缩的样式。反正小程序打包发布的时候会被压，所以这里可读。

现在，这个scss转换只适用于项目。如果新建小程序项目，需要重新添加(不建议设置为全局，可能会造成意外伤害)。

注意文件观察器列表右操作栏下方有一个“导入/导出”按钮，可以导出并保存现在已经配置好的设置，以后新建项目时只需要导入即可。

之后，还有一个问题。如果我手动删除已编译的css文件(即wxss或acss，缩写如下)并保持scss文件不变，css文件将不会被重新编译。或者如果监控失败或者不够及时，css可能是旧的。因此，需要一个命令来统一转换整个目录中的scss文件，以确保没有遗漏，并保持代码最新。

但是我看了很久的sass和sass-convert文档，却找不到一个可用的编写方法，可以让命令行遍历指定目录下的所有scss文件，转换成css放在源文件所在的目录下，后缀改为wxss或acss。

所以遍历这个行为只能由nodejs实现。代码如下：

创建编译脚本build/scss-convert.js:

var path=require(' path ')var fs=require(' fs ')const { exec }=require(' child _ process ')const base path=path。resolve(_ dirname ,)./')函数mapDir(dir，回调，完成){ fs.readdir(dir，函数(err，文件){ if(err){ console。err(err)返回}个文件。foreach((文件名，索引)={让pathname=path。join(dir，filename) fs.stat(pathname，(err，stats)={ //读取文件信息if (err) { console.log('获取文件统计数据失败)返回} if(stats。IsDirectory()){ MapDir(路径名，回调，完成)} else if (stats.isFile()) { if(！['.SCS '].包括(路径。扩展名(路径名))){ return }回调(路径名)} })if(index===文件。length-1){ finish(finish()} })} MapDir(基本路径，函数(文件){ const new file，text=path。基本名称(文件').SCS ')if(NewFileWithText。以(' _ ')开头){ return//按照scss规则，下划线开头的文件不会生成css } //exec可以让nodejs执行外部命令exec(` sass-no-cache-source map=none-default-encoding utf-8-style expanded $ { file } : $ { new fileivetext })。acss `，{ CWD 3360路径。目录名(文件)//不写这个会导致生成的文件出现在根目录}，(err，stdout，stderr)={ if(err){ console。日志(错误)返回}控制台。log(` stdout : $ { stdout } `)})}，function() { //console.log('xxx文件目录遍历完了') })在package.json里添加一条script:

脚本： { ' scss ' : '节点构建/scss-convert '，}，