Windows下的SASS环境搭建
虽然眼下 CSS 预编译框架不少，但 SASS 已经逐渐成为主流了，为了更好的适应社会，满足市场需求，获取新技能是必须的。
之前一直想使用 SASS，但都碍于它需要在 ruby 环境下编译而退缩了，这次总算是硬着头皮把环境搭好，准备投入到 SASS 的怀抱中去...
没办法，在 W3CPLUS 的推广下，我也深受影响就是了...
作为 windows 子民，首先当然是安装 ruby
官网地址：http://rubyinstaller.org/
自己下载去，然后傻瓜式安装就是。但也有一点值得一提的，请看下图：
其中红线框部分请注意，请务必勾上，意思是添加系统环境变量到 PATH，这样你就可以在任何目录下使用 ruby 命令行了
接下来是安装 SASS
大多数情况和大部分人群中，还是喜欢安装 SASS 的标准稳定版本，这样使用在项目中风险不会太大
如果你想安装 beat 版，或者尝试别的安装方式，可以去 W3CPLUS 查看相关文章，这里不发散了
(传送门：http://www.w3cplus.com/preprocessor/sass-compile.html)
打开命令终端（开始——运行——cmd——确定），然后键入下面命令
gem install sass
如果你的网络环境很 nice，顺利安装成功没压力~
但假如你很不幸，网络环境到处是墙，而且 SASS 前面刚好就有那么一道...（天朝的网络环境普遍如此，相信很多人都深受其害）
那么这就是阻碍我们使用 SASS 的第一个坑了。
这时候我们该怎么办？FQ...？咱是斯文人，还是用文雅一点的办法吧。（其实是我太懒了，没去学这一技能，大家请别喷...）
既然东莞被无情打压，那我们就转道去深圳嬉戏呗~
淘宝的同学非常友好的提供了 RubyGems 的镜像：http://ruby.taobao.org/ （这个地址是可以直接访问的，建议点进去看一看）
接下来分别执行下面命令
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
这样就把我们要获取资源的地址设置成 http://ruby.taobao.org/ 了，同在天朝下，再无任何隔阂，可以和谐的访问了
当然，为了保险起见，我们可以执行下面的命令
gem sources -l
来查看所有资源获取域，并确保只有 http://ruby.taobao.org/ 一个
OK，一切准备就绪，再执行一开始我们提到的 SASS 安装命令，安装完成！
安装完 SASS 后，接下来是安装 node.js 和 grunt
这里请容许我一笔带过，因为先前我已经有文章提到过这两者的安装方式了。
（传送门：http://www.cnblogs.com/czf-zone/p/3649657.html）
网上相关的文章也一抓一大把...这里就不再废话，节省篇幅。
环境的搭建至此也就7788了，但搭好不跑跑，好像有点流氓，SO~DO IT
首先，创建一个测试根目录 sassTest
然后在根目录下创建两个子目录 css 和 sass，在 sass 目录里创建 style.scss 文件
接下来在根目录下创建一个 package.json 文件，里面的代码如下：
{
"name": "sassTest",
"version": "0.0.1",
"devDependencies": {
"grunt": "0.4.1",
"grunt-contrib-watch": "0.4.3",
"grunt-contrib-sass": "0.4.0"
}
}
再在根目录下创建一个 Gruntfile.js 文件，里面的代码如下：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
basePath: '../',
srcPath: 'sass/',
deployPath: 'css/'
},
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',
// Task configuration.
sass: {
dist: {
options: {
sourcemap: false,
style: 'expanded'
},
files: {
'<%= meta.deployPath %>style.css': '<%= meta.srcPath %>style.scss'
}
}
},
watch: {
scripts: {
files: [
'<%= meta.srcPath %>/**/*.scss'
],
tasks: ['sass']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['sass']);
};
OK，东西都准备完了，接下来，在 sassTest 目录下打开命令终端。执行下面指令：
npm install
安装依赖模块，安装好后 sassTest 目录下会多出一个 node_modules 文件夹，里面就是刚刚安装好的模块，我们不需要去关心
之后，再输入下面指令：
grunt watch
这样就开始监听 scss 文件变化了。这时修改 style.scss 文件，grunt 就会自动帮我们把 SASS 编译成同名的 CSS 文件，并保存到 CSS 目录中去。
最终编译成功后，得到的目录结构是这样的：
补充
其实用除了上面的方法，还可以用简单点的办法来搭建环境。那就是直接安装 node-sass，然后配合 gulp 和 gulp-sass
但是安装这套环境一般都会由于 node-sass 安装不上而让人吐血
这里给一条命令大家，理论上安装 node-sass 就不会有问题了（主要是利用了淘宝镜像）
npm install node-sass@3.8.0 --sass-binary-site=http://npm.taobao.org/mirrors/node-sass/
安装好 node-sass 在安装 gulp 和 gulp-sass 就可以了
至于 gulp 和 gulp-sass 怎么玩，这里就不多说了，直接度娘吧
