###RubyInstaller

If you are on Windows, there is a great project to help you install Ruby: RubyInstaller. It gives you everything you need to set up a full Ruby development environment on Windows.
Just download it, run it, and you are done!

Check whether Ruby already is available by opening a terminal

ruby -v

Try Ruby

1.由于国内网络原因，首先我们来修改一下Ruby的source地址

gem sources --remove https://rubygems.org/ //移除默认的
gem sources -a https://ruby.taobao.org/ //添加新的地址
gem sources -l # 查看list

gem update //更新ruby版本

2.安装Sass
如果安装多个版本的sass先下载DevKit构建工具

gem install sass
sass -v 
gem install sass --version=3.3 //安装特定版本的sass , 但要先安装build tools 》DevKit
gem list //列出本地的所有ruby程序包
gem unistall sass -- version=3.3.0 //卸载特定版本的sass

简单说一下安装devkit注意事项：

DevKit 是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make, gcc, sh来进行编译。注：这个方法目前仅支持通过RubyInstaller安装的Ruby，如果不是建议你重新安装。安装方法：双击下载的7z文件，指定解压路径，路径中不能有空格。如D:/DeveloperInstall\DevKit，这个路径就是。
cd

ruby dk.rb init //#生成config.yml，这里会检查将要添加DevKit支持的Ruby列表，只支持通过RubyInstaller安装的Ruby

如果这里列出的Ruby与你的要求不符，可以手动修改

ruby dk.rb review //检查要添加DevKit支持的Ruby列表是否有误，可以略过
ruby dk.rb install //安装后会出现以下两条信息
//[INFO] Updating convenience notice gem override for 'D:/DeveloperInstall/Ruby22'
//[INFO] Installing 'D:/DeveloperInstall/Ruby22/lib/ruby/site_ruby/devkit.rb'

gem install rdiscount --platform=ruby //检查是否安装成功  如果能安装rdiscount成功说明安装DevKit成功

安装好DevKit后就可以安装多个版本的sass等

测试一下：
mkdir learn-sass-cli
vim main.scss //按i进入编辑后添加 *{margin:0;padding:0;} 然后按esc进入命令行模式 输入:wq 保存退出
sass main.scss main.css // 转css文件
sass-convert main.scss main.sass // 转.sass文件，可以了解一下sass写法

3.安装Compass

gem install compass

compass create learn-sass-syntax //创建compass-sass项目

在命令行模式下，除了一次性编译命令，compass还有自动编译命令

　　compass watch

运行该命令后，只要scss文件发生变化，就会被自动编译成css文件。
1.sass 变量声明

/*在.scss文件中 ---变量的声明
$headline-ff:Arial,Verdana,Helvetica,sans-serif;
$main-sec-ff:Arial,Verdana,Helvetica,sans-serif;

2.scss中包含已有的.scss文件

例如：把上面的变量存在一个新建的_variables.scss文件中，由于变量不用被转化成css文件，所以在文件名前加下划线：表示局部文件

@import "varables"; //scss文件中的import并非css中的import，css中import必须放在代码最前面，对性能也不利，css文件中不建议用import指令

3.引入时没有带入下划线：基于sass的既定规则

1.没有文件后缀名的时候，sass会添加.scss或.sass的后缀
2.同一目录下，局部文件和非局部文件不能重名

4.使用css原生@import的既定规则：

1.当@import后边跟的文件名是以.css结尾的时候
2.当@import后边跟的是http://开头的字符串的时候
3.当@import后边跟的是一个url()函数的时候
4.当@import后边带有media queries的时候

注意：多个x需要import的文件可以写成一行，用逗号隔开

sass编译中文时候出现如下错误的解决方法：

error sass/screen.scss (Line 2 of sass/_variables.scss: Invalid GBK character "\xE5")

到ruby安装目录下的gems\2.2.0\gems\sass-3.4.19\lib\sass等目录下找到engine.rb文件，在文件里require后加上就可以了：

Encoding.default_external = Encoding.find('utf-8')

语法注意事项

例如：

1. 如下图1：
   左侧是scss文件，右边是生成后的css文件，blue的a后面多一个空格影响就很大，指a标签下面所有元素hover效果，注意&特殊符号的应用。

2.sass里提供了class嵌套，也提供了Atrribute嵌套

//class嵌套
.mian-sec{
    font-family:$main-sec-ff;
    .headline{
        font-family: $main-sec-ff;
        font-size: 16px;
    }
}
//属性嵌套
.mian-sec{
    font-family:$main-sec-ff;
    .headline{
        font:{
          family: $main-sec-ff;
          size: 16px;
        }
    }
}

两种形式生成css结果一样：

/* line 31, ../sass/screen.scss */
.mian-sec .headline {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
}