在VS Code使用Sass最新配置流程

原谅我标题党了一下，事实如此。搜到的博文都是一句话带过让我到这个官网下载安装包。（安装包链接已放到文末）尝试数个版本之后仍然是下载一半失效，可能我梯子质量不行吧。此外还很让人懵逼的一点是：在搜索引擎搜sass得到的sass.hk网站的指导是错误的…“gem sources -a https://ruby.taobao.org/”，在命令行输入这句后就直接报错，抱歉忘了截图。大意是命令错误，你要不试试这个链接：https://gems.ruby-china.com/。打开看之后才知道了安装sass的正确姿势。貌似不对，当时命令行给的还是https://gems.ruby-china.org，由于备案的问题还是得用.com的域名。这就是我用”最新”二字的原因，technology changes,you must catch up with it。

下面走一遍完整的安装使用流程。

我用的是sass，为啥要装Ruby?因为sass基于Ruby语言开发，因此安装sass需要安装Ruby。mac下自带Ruby无需安装。

安装包下载好之后，点击安装出现如下界面。

可以不用勾选744多m的那个。此外，有一个需要勾选的，”add ruby executables to your PATH”，（貌似现在都默认勾选了）用于将ruby添加到系统变量。安装完成之后，出现对话框询问是不是要直接打开命令行安装一些东西，也不勾选，然后finished。我第一遍安装的时候就两个都够了，然后在命令行下载了几G的安装包…

完事后在开始栏中点击”Start Command Prompt With Ruby”，就进入你想要的黑框框。

由于墙的存在，我们先设置下安装东西的源以便加快速度。

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
# 此处是 l(list)，不是1
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

然后安装最新版本的Sass和Compass

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

在每一个安装过程中，你都会看到如下输出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

好，sass已经安装好了。怎么用？

这里我们只讨论在VS Code中使用，编写好sass代码由于浏览器并不能识别该代码。所以我们需要借助工具帮我们把sass转换成浏览器认识的css语言。

在VS Code插件栏中搜索sass，就可以看到sass相关的插件，我们需要的编译的工具。这里以Easy Sass为例。安装完成后插件已经帮你配置好了。但有时或许我们不需要编译成两种格式，那只需要把你的配置写在右边就可以覆盖左边的配置了。此外还有编译完成之后文件的存放路径，一般我们的项目都会有css目录，所以你可以把编译后的文件存放路径设置为 ./css/。但这里应该是要自己现在文件夹创建该目录，不然他会提示你该目录不存在。

补充一下后面实际使用时遇到的坑，当sass文件和css文件不在一个目录时，引入图片等文件路径需要以css所在的文件路径为准。

完事之后，就可以愉快的使用sass了。

windows安装文件：链接： share.weiyun.com/5Je7HEf （密码：MRag）

注：文中关于用命令安装sass的部分引用至sass.hk网站。