在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
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了。

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

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