Windows下配置Sass编译环境

Less大家想必都知道，与Sass一样都是动态样式语言，都是用来让写CSS样式更加的优美。下面来看一下关于Sass的环境配置，由于本人的机器无法上网，因此在安装的时候费了一翻功夫，特别是找sass 3.2.4.gem文件时，在Sass的官方网站竟然没找到。

1、Sass的编译是依赖于Ruby的，因此第一步我们需要先安装Ruby。在Sass的官方网站我们可以找到ruby的下载地址：http://rubyinstaller.org/downloads/

下载回来后就可以一步步的安装了。

2、安装sass.gem。

如果能够直接连网的话，直接使用gem install sass就ok了。但如果用于开发的机器是无法连网的话，那只能从本地进行安装了。

首先从https://rubygems.org/上面查找并且下载sass，以下是sass 3.2.4的下载地址：https://rubygems.org/gems/sass

然后进入命令行，输入：gem install sass-3.2.4.gem -l。

后面的-l参数一定要添加，代表从本地安装此gem。运行结果如下代表安装成功：

D:\>gem install sass-3.2.4.gem -l
Successfully installed sass-3.2.4
1 gem installed
Installing ri documentation for sass-3.2.4...
Installing RDoc documentation for sass-3.2.4...

3、来做代码进行测试，创建一个test.scss文件，内容如下：

$color: #369;

body {
    background: darken($color, 10%);
}

在命令行中输入：

sass test.scss:test.css

结果不显示任何信息则代表编译通过，在test.scss文件所在目录下可以找到一个编译后的文件test.css：

body {
  background: #264c73; }

4、每次修改后总这么来运行也不是办法，因此sass提供了一个监视器，用于监听文件的修改，当文件被修改则立即进行编译。

D:\>sass --watch test.scss:test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

这时候我们再进行修改test.scss文件，在命令窗口中会输入以下相似字符串：

overwrite test.css
>>> Change detected to: D:/test.scss

5、一个文件一个文件的监视够麻烦的，因此我们可以直接去监视一个目录，命令与监视文件相似。比如我们监视folder目录。

sass --watch folder:folder

6、相关的教程可以去sass的官方网站去学习。