SCSS的安装（windows）与使用
SCSS（Sassy CSS）是什么？还比CSS多了个S，是Super CSS么？ 你要是想这样理解也可以（其实是错的），因为SCSS相比CSS的确多了很多超级特性。 CSS严格的说并不是一门语言，所以缺少了复用，遍历，条件语句等特性，只能一条一条的去书写样式。因此我们写css时，常常想如果能定义个变量就舒服了，统一调用，统一修改，美滋滋啊！
CSS预编译器有 SASS LESS Stylus等等，SCSS是SASS3引入的新语法。那为什么要选择SCSS呢？那我只能说我喜欢啊！不管SASS也好，LESS也罢，还是Stylus都只是一种工具，各有各的优缺点，选择自己喜欢的用着舒服的就是了。没必要纠结这么多。
一：直接解析
准备工作（注意：这是windows平台下的安装）
- Ruby
- SASS
1.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。所以不懂Ruby，一样可以使用。只是必须先安装Ruby，然后再安装SASS。
ruby_download.jpg
根据自己系统的位数（64 OR 32）选择合适的安装包，下载安装包之后双击打开，一路下一步，完成！
install.jpg
打开ruby的控制台，输入ruby -v，如果出现以下结果，则证明ruby安装成功！
ruby -v
ruby-version.jpg
安装完ruby之后，直接在控制台就可以安装SASS。
gem install sass
至此，SCSS安装完毕！
1.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以将.scss文件转化的css代码并保存到一个新文件中。（假设文件名为app。）
sass app.scss app.css
SASS提供四种编译风格的选项：
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
编码风格自行设置，用一次就知道了嘛。
二：Gulp
准备工作（注意：这是windows平台下的安装）
2.1 安装
首先安装Node.js，到官网下载对应系统版本（64/32）的安装包，直接下一步下一步，over！安装完成后控制台输入 node -v 和 npm -v 检测是否安装成功。
node -v
npm -v
node-npm.jpg
Node.js安装完成之后，使用npm 安装Gulp。
npm install -g gulp （全局安装）
npm install --save-dev gulp（项目安装）
注意：由于npm安装插件是从国外服务器下载，受网络影响大，而且由于你懂的原因可能会下载失败，因此推荐使用淘宝镜像。
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm.jpg
2.2 使用
约定项目结构如下：
|-- gulp-scss
|-- dist
|-- src
|- assets
|- scss
|-- package.json
|-- gulpfile.js
进入项目根目录（gulp-scss）安装项目依赖：
cnpm i -D gulp gulp-sass
-
gulpfile.js
gulpfile.jpg
gulpfile.jpg
在控制台运行 gulp scss 命令即可生成css文件
gulp scss
gulp-scss.jpg
结果：
scss.jpg
css.jpg
到此gulp解析scss文件告一段落。至于能不能实时编译scss文件，能不能一次编译多个scss文件。答案是肯定的，但是这是属于gulp的配置范围，在此不多做赘述。
三：Koala
准备工作（注意：这是windows平台下的安装）
3.1 安装
Koala是一款图形化界面的编译软件，支持Sass Less CoffeeScript的编译。官网下载直接安装，不过需要依赖于Ruby。具体安装就不做介绍了。
koala.jpg
四：编辑器编译
准备工作（注意：这是windows平台下的安装）
4.1 安装
首先安装ruby，安装完成之后，在sublime text3中安装 sass 和 SASS Build 两个插件。（sublime 安装插件的方法请自行百度）
Ctrl + shift + P
4.2 使用
插件安装完毕后，打开scss文件，按下Ctrl+B,将会编译成一个同名的css文件。
Ctrl + B
至此scss文件的几种编译方法解说完毕！
