1、安装sass
在安装sass前需要安装ruby，下载ruby时要注意自己电脑是32位还是64位，下载好正常安装，但注意一下：要勾选下图这一项，添加环境变量（安装过JDK的朋友应该知道环境变量）
下一步、下一步。。。安装完成后，开始菜单点击：
输入命令：gem install sass 。我猜你会看到安装失败的提醒：
因为默认的sass下载地址https://rubygems.org/被墙了，所以无法连接安装，ping了一下可看到：
可我“翻”了一下“墙”，发现还是不能成功安装，只好作罢，换一个下载地址，淘宝的：https://ruby.taobao.org/ 。 ping一下正常：
接下来要做的就是添加国产淘宝的地址，并把默认被墙掉的地址删除，输入命令： gem sources -a https://ruby.taobao.org/添加淘宝地址：
提示信息有added to sources表示添加成功，可运行命令：gem sources 查看现有的下载地址：
现有两个，一个是默认的，一个是刚添加的淘宝的，必须要把默认的删掉才能安装，运行命令删除默认：gem sources -r https://rubygems.org/ 提示removed from sources 说明删除成功。
确保只有一个淘宝的地址，才能成功安装sass：
好，这时可以放心的运行 gem install sass 来安装了：
Perfect！
2.把scss文件编译为css文件
先新建一个.scss文件吧，代码：（虽然sass代码刚写起来生硬，但相信代码还是能看懂啥意思的）
.box {background: #eee;border: 2px solid #ccc;.heading {font-size: 14px;} }.box2 {@extend .box;padding: 10px; }
我这里保存为test.scss文件，然后用命令行进入保存文件的所在目录（我的是E盘ts文件夹下），然后运行翻译命令： sass test.scss test.css 把test.scss文件编译为test.css文件（css文件名可以重新取名）：
这时再返回文件所在文件夹，你会发现多出了一些文件，其中就有我们想要的test.css文件：
打开test.css文件我们会看到编译好的css代码，对比编译前scss文件源代码可看出sass的厉害之处啦：
.box, .box2 {background: #eee;border: 1px solid #ccc; } .box .heading, .box2 .heading {font-size: 2em; } .box2 {padding: 10px; }/*# sourceMappingURL=test.css.map */
当然了你也可以把css文件编译为scss文件，输入命令： sass -convert test.css newtest.scss 就能把test.css编译为newtest.scss文件啦，这里就不再赘述。下面就是要学习sass语法的时候了，我也是初学者，共同进步吧。
转载于:https://www.cnblogs.com/chayangge/p/4359123.html