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

5,542 阅读3分钟

原谅我标题党了一下,事实如此。搜到的博文都是一句话带过让我到这个官网下载安装包。(安装包链接已放到文末)尝试数个版本之后仍然是下载一半失效,可能我梯子质量不行吧。此外还很让人懵逼的一点是:在搜索引擎搜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网站。