Sublime Text 3 通过插件将 Sass 编译为 CSS 文件

Ruby 安装

因为 Sass 依赖于 Ruby 环境，所以装 Sass 之前先确认装了 Ruby 。 先去官网下载个 Ruby。 在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示错误。 如图： 安装路径建议不要更改，点击 Install 开始安装。

Sass 安装

安装完 Ruby 之后，在 Window 的开始菜单中，找到刚才我们安装的 Ruby，名称叫 Start Command Prompt with Ruby ，或者打开命令提示符 。 输入 ruby -v 测试版本是否存在，有，则说明安装 Ruby 安装成功。可以继续操作 如图： 能正确输出版本号，表示可以用 Ruby 了。 继续，在命令行中输入： 按回车键确认，等待一段时间就会提示你 sass 安装成功。 如果你喜欢 bate 版本（测试版），则输入： 由于是国外的资源，安装过程如果失败也是有可能的。

如果安装失败，参考最后面给出的步骤，修改镜像地址为国内淘宝镜像，成功安装则忽略。

  你还可以从 Sass 的 Git repository 来安装，Git 的命令为 上方三个步骤表示为：1、克隆线上的到本地，2、进入克隆的本地文件夹，3、执行安装 如果你的 Sass 版本过低，需要升级Sass，则输入以下命令 查看是否成功安装 Sass ，输入 sass -v ，成功输出 Sass 版本号表示成功。 如图所示：  

Sublime Text 3 的 Sass 相关插件安装

调出控制台， Preferences -> Package Control 或者按快捷键调出：Ctrl+Shift+P (Linux/Windows) 或 Command+Shift+P (OS X) 如图：   点击 Install Package 会弹出插件框。  

输入 Sass ，在候选框中点击 Sass 文件，静等安装成功。

等待过程中，软件右下角提示（Loading repositories [ = ]）： 温馨提示：那个 = 号一直在来回晃动，在晃动表示还在安装中。

说明：该插件功能为让 Sublime Text 支持 Sass 语法；

 

同理，安装 Sass Build ，静等成功。

安装成功后，编译 Scss 文件路径，Tools -> Build，也可以按快捷键 CTRL + B 编译。 编译成功后，同级目录生成 .css 及 .css.map 两个文件。

说明：该插件功能为让 Sublime Text 能编译 Scss 文件。

 

建议安装，SublimeOnSaveBuild。

每次修改完毕后，都要编译一次，有没有一种，我保存立刻就自动编译的插件来代替繁琐的编译步骤？有！就是这个插件，保存即编译。

说明：该插件表示，我很吊，我能保存就立刻给你编译出来。

 

修改为淘宝镜像源

由于国内网络原因，这时候我们可以通过 gem sources 命令来配置源，先移除默认的 https://rubygems.org 源，然后添加淘宝的源 https://ruby.taobao.org/ 。 某些系统不支持 https 协议的，请将淘宝源更换成：   完毕！ 参考： https://github.com/jaumefontal/SASS-Build-SublimeText2 https://segmentfault.com/a/1190000003855415 http://www.w3cplus.com/sassguide/install.html http://www.tuicool.com/articles/eA3UVbI