1. 安装Ruby

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby

下载地址：官网
下载地址：中文网

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

2. sass安装

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

在任意位置新建文件夹，如sass-test
在命令窗口中找到该文件夹如：

查看文件源

国外网站可能会访问不到，因此更改为国内源：

下载sass，gem install sass ,如果出现下图，则安装成功

3. 简单使用sass

具体命令语法，可参考：
http://www.w3cplus.com/sassguide/syntax.html
http://www.ruanyifeng.com/blog/2012/06/sass.html

4. HBuilder配置

工具->预编译器配置->.sass,.scss->编辑

命令参数：--style=compact --sourcemap=none --no-cache %FileName% %FileBaseName%.css

5. sublime配置

关于sass 3.3.0更新说明——3.3.0

sublime相关插件为：scss语法高亮，sass语法高亮，编译，保存即编译，格式化

打开Sublime->Preferences->Browse Packages…
将上述插件下载并解压至该文件夹下，重启Sublime

检查是否安装成功
Ctrl+Shift+P    -> List Packages 可以找到下述插件

6. 使用Sublime Sass

创建scss文件，实时编译Ctrl+b
如果不想生成.map文件，找到插件目录
打开Sublime->Preferences->Browse Packages…
找到该文件

记事本打开

加上“--sourcemap=none”或者其他参数配置

大功告成！

1. 安装node,选择版本不多说

中文网 http://nodejs.cn/
官网 http://www.nodejs.org/download/

安装套路：选择安装路径，接受协议，各种下一步
注意一点：一般勾选自动配置环境变量，不然要自己配置，默认给配置的话就方便多了。如果需要配置环境变量的话，加上nodejs的安装路径即可，比如说我的安装路径是D:\nodejs\，那么在path的变量值之后加上;D:\nodejs\即可

2. gulp作用

• 自动刷新页面
• 自动编译scss
• 自动合并文件
• 自动压缩文件

3. gulp简单使用配置

创建一个测试项目gulp
• Ctrl+R -> cmd -> cd到gulp目录
• npm install gulp
• npm install gulp-connect
• npm install gulp-ruby-sass
• npm install gulp-uglify

在项目文件下创建配置文件gulpfile.js
文件内容：
//加载模块

var gulp = require("gulp");
//合并文件
//var concat = require("gulp-concat");
//热部署（即时刷新）
var connect = require("gulp-connect");
//编译scss
var sass = require("gulp-ruby-sass");
//压缩文件
var uglify = require("gulp-uglify");

//定义个任务，处理html
gulp.task("refreshHTML",function(){
    gulp.src("./*.html").pipe(connect.reload());
});

//监听任务
gulp.task("watch",function(){
    //让connect启动一个服务器，这样它才能即时刷新浏览器
    connect.server({
        livereload:true
    });
    //检测文件的变化，执行相应的任务
    gulp.watch("./*.html",["refreshHTML"]);
});

/*******************我是文件结束线*******************************/

命令行中：

gulp watch 回车得到如下（如果提示不是内部命令什么鬼的，npm install -g gulp）

得到localhost:8080地址，就可以实现实时更新啦，撒花完结！

附相关网站教程：

https://www.npmjs.com/
http://www.open-open.com/lib/view/open1426232157888.html