Sass环境搭建及使用测试(windows学习环境)
Ruby下载及安装
Ruby官网：https://rubyinstaller.org/downloads/
Sass编译依赖Ruby，因此第一步我们需要先安装Ruby：
下载完成后双击安装，一路默认选项下一步，傻瓜式安装，安装后你会得到如图命令行工具：
首次打开时，Ruby会让你安装一些东西，直接按照提示回车即可，最后得到如图界面：
查看是否安装成功：
ruby -v
出现下图类似版本号，即为安装成功：
到这里，就完成了Ruby的下载及安装~
安装Sass
一、打开Ruby命令行工具，键入以下命令：
gem install sass
等待安装即可，时间可能略长(根据network)，期间不需要任何操作。
如果提示如图信息，则安装失败：
解决方法，键入命令行：
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
再次输入命令 gem install sass，就可以安装成功！
二、测试sass是否安装成功，键入以下命令：
sass -v
出现下图类似版本号，即为安装成功！
到这里，Sass环境搭建完成，接下来准备测试环境！
测试环境
一、新建两个文件：
二、打开 index.html 文件编写以下代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入demo.scss --><link rel="stylesheet" href="demo.css">
</head>
<body><h1 id="H1">示例文字</h1>
</body>
</html>
三、打开 demo.scss 文件编写以下代码：
$new_color:rgb(255,0,0);#H1{background:$new_color;
}
四、编译 demo.scss 为 demo.css：
首先，打开 Ruby命令行 工具，定位 demo.scss 文件所在目录：
然后键入以下命令：
sass demo.scss demo.css
没有提示的提示才是成功的提示，然后查看目录，会多出一些文件，暂时不要管他们：
此时，你会发现 demo.css 正是我们所需要的文件，到这里就编译完成了。
五、打开 index.html 文件查看页面效果：
可以看到已经生效，以上编译只是单文件编译命令，我们不能每次编写代码，都要重复以上操作吧？
显然这些问题早已经被想到并解决，那就是文件监听(下面)。
监听
对单文件进行监听，如果之前的文件有改变，那么此次编译就会在上次的基础上做改动，简单来说，就是你每次写完代码，只要保存，sass就会为你自动编译更新，也叫实时更新。
Ruby命令行工具键入命令：
sass --watch demo.scss:demo-output.css
解释：demo.scss 是想要实时编译为 css 格式的文件，而 demo-output.css 正是该 css 文件！