使用 VSCode 编辑器来编译 Sass

ＶＳＣｏｄｅ　是继　Ｓｕｂｌｉｍｅ　Ｔｅｘｔ３、Ａｔｏｍ　后另一个让我爱不释手的编辑器，其颜值和插件生态圈与　Ａｔｏｍ　不相上下，但比后者用起来更加丝滑流畅（Ａｔｏｍ　需要４Ｇ＋内存和ＳＳＤ　才能逆天），所以自然成了我目前首选的编辑器。

前端项目自然少不了和　Ｓａｓｓ　打交道，ＶＳＣｏｄｅ　提供了丰富的相关插件来帮助我们处理　Ｓａｓｓ　相关任务。我用的是　Ｅａｓｙ　Ｓａｓｓ　这款插件，目前最新版本是　０．０．６。

由于　Ｓａｓｓ　的编译依赖　Ｒｕｂｙ　环境，因此我们在开始之前首先得安装　Ｒｕｂｙ，别担心，装　Ｒｕｂｙ　只是为了提供运行环境，不懂　Ｒｕｂｙ　没任何关系。官网下载传送门

安装　Ｒｕｂｙ　时一定要勾选　Ａｄｄ　Ｒｕｂｙ　ｅｘｅｃｕｔａｂｌｅｓ　ｔｏ　ｙｏｕｒ　ＰＡＴＨ，用来将　Ｒｕｂｙ　添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入　ｇｅｍ　ｓａｓｓ　来安装　Ｓａｓｓ，安装完成后启动　ＶＳＣｏｄｅ，在拓展商店里搜索“ｅａｓｙ　ｓａｓｓ”，并安装，安装成功后重启　ＶＳＣｏｄｅ。

接下来进行配置。在　ＶＳＣｏｄｅ　菜单栏依次点击“文件　首选项　设置”，打开　ｓｅｔｔｉｎｇｓ．ｊｓｏｎ　全局配置文件。搜索“ｅａｓｙｓａｓｓ”，然后把　ｅａｓｙｓａｓｓ　相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。
注意这里的配置项是全局的，不是只针对当前　ＶＳＣｏｄｅ　中打开的项目。换句话说，如果你在　ＶＳＣｏｄｅ　中切换了项目，应按实际情况再次调整　ｅａｓｙｓａｓｓ　的配置项。

所有的默认配置项如下：

＂ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ＂：　ｔｒｕｅ，＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂：　＂＂，＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ＂：　［
　　　　｛
　　　　　　＂ｆｏｒｍａｔ＂：　＂ｅｘｐａｎｄｅｄ＂，
　　　　　　＂ｅｘｔｅｎｓｉｏｎ＂：　＂．ｃｓｓ＂
　　　　｝，
　　　　｛
　　　　　　＂ｆｏｒｍａｔ＂：　＂ｃｏｍｐｒｅｓｓｅｄ＂，
　　　　　　＂ｅｘｔｅｎｓｉｏｎ＂：　＂．ｍｉｎ．ｃｓｓ＂
　　　　｝］，＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂：　＂＂

• ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ　保存　ｓｃｓｓ　或　ｓａｓｓ　文件后自动进行编译。默认为　ｔｒｕｅ。一般设为　ｔｒｕｅ，可提高工作效率，如果项目中有不直接编译的文件，例如　ｖａｒｉａｂｌｅ．ｓｃｓｓ、ｔｈｅｍｅ．ｓｃｓｓ、ｍｉｘｉｎ．ｓｃｓｓ　等，建议设为　ｆａｌｓｅ，避免这类文件编辑保存后被编译为无效　ｃｓｓ　需要手动删除的尴尬。

• ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ　提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成　ｃｓｓ。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：ｍｉｘｉｎ．ｓｃｓｓ，然后设置：｀＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂：　＂＾＋＂｀，即可排除所有以下划线开头的　ｓｃｓｓ／ｓａｓｓ　文件。

• ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ　定义输出　ｃｓｓ　文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的　ｃｓｓ　文件。每个数组对象中有两个参数：

1. ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｆｏｒｍａｔ　用以编译生成对应风格的　ｃｓｓ，参数值如下：

   ｎｅｓｔｅｄ：嵌套缩进的　ｃｓｓ　代码。
   ｅｘｐａｎｄｅｄ：没有缩进的、扩展的ｃｓｓ代码。
   ｃｏｍｐａｃｔ：简洁格式的　ｃｓｓ　代码。
   ｃｏｍｐｒｅｓｓｅｄ：压缩后的　ｃｓｓ　代码。

2. ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ　顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的　ｃｓｓ　文件名会按照“当前　Ｓａｓｓ　文件名（不含拓展名）＋此处自定义文件名”的格式来生成。
   例如：设置　＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ＂：　＂．ｍｉｎ．ｃｓｓ＂，假设当前的　Ｓａｓｓ　文件名为
   ｓｔｙｌｅ．ｓｃｓｓ，则编译输出的　ｃｓｓ　文件名为　ｓｔｙｌｅ．ｍｉｎ．ｃｓｓ。

• ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ　我们在生产环境中很多情况下　ｓｃｓｓ／ｓａｓｓ　文件和　ｃｓｓ　文件是不在同一个目录下的，而　Ｅａｓｙ　Ｓａｓｓ　默认输出的　ｃｓｓ　是和当前　Ｓａｓｓ　文件处于相同目录的，为此我们需要通过该参数来配置输出路径。
  参数值可以是绝对路径或相对路径。如果是相对路径，则以　ＶＳＣｏｄｅ　当前打开的项目的根目录为基准。
  例如：设置　ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ　为　＂．／ｃｓｓ／＂，此时保存修改完毕的　Ｓａｓｓ　文件，ＶＳＣｏｄｅ　会自动编译并在当前　Ｓａｓｓ　文件的上级文件夹　ｃｓｓ　目录下输出生成　ｃｓｓ　文件（见下图）。

例如下图的文件结构，项目根目录是　ＴＥＳＴ　文件夹，ｓｃｓｓ　文件存放于　ｓａｓｓ　文件夹，编译输出目录是　ｃｓｓ　文件，则配置为：＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂：　＂ｃｓｓ／＂（＂ｃｓｓ＂　后面的斜线也可省略）。

本文所述的只是采用　ＶＳＣｏｄｅ　编辑器编译生成　ＣＳＳ　的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如　ｇｒｕｎｔ、ｇｕｌｐ、ｆｉｓ　等。