编译
SCSS 其实是类 CSS 语法的 SASS，而 SASS 又是什么呢？SASS —— Syntactically Awesome Stylesheets，直译为「语法犀利的样式表」。它原本是基于 Ruby 的。
所以要想把写好的 SCSS 变成 CSS，可以借助与 Ruby 的 SASS 编译器。下面我们来看看如何安装。
1.首先当然是安装 Ruby。你可以到 Ruby 的中文主页 下载 Ruby 的 Window 安装器。一直点下一步就可以安装了。
2.然后就可以按照 SASS 官网的教程 来安装 SASS 了。打开命令行（点击「开始」-> 运行 -> 输入 cmd -> 回车），输入gem install sass。基本上，如果你在公司运行这个命令，一定会看到错误提示。不要紧，这是因为我们没有设置代理，在命令行输入set HTTP_PROXY=http://proxy.tencent.com:8080 即可。然后重新 gem install sass 试试。
3.安装成功后你就可以在命令行输入 sass -v 看看你安装成功没有了。如果你看到类似 Sass 3.2.7 (Media Mark) 的提示就说明成功了！如果不成功的话也许你可以把 Ruby/bin/ 目录加入环境变量 PATH。
4.这一步我们把一个 SCSS 文件编译成一个 CSS 文件。首先在 C 盘新建一个 test.scss 文件，其内容为
.main { color: #000; p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } } 然后再命令行中定位到此文件所在目录，输入
sass test.scss
你会看到它把得到的 CSS 内容直接输入在屏幕上了。如果想把 CSS 内容保存到文件，可以输入
sass test.scss:test.css
当前目录就会新建一个 test.css 文件了。
5.难道没改动一次 SASS 文件都要去运行一次命令行把它变成 CSS 吗？这里有一个监听文件变化的方法
sass --watch test.scss:test.css
这样一来，你每次保存 test.scss 文件时，test.css 文件都会更新。你甚至可以监听一整个目录
sass --watch ./scss/:./css/
那么 scss 目录中的任意一个文件改变时，css 目录中也相应的更新，是不是很方便~
细心的童鞋肯定会发现每次编译时都会多出一个 .sass-cache 目录，很是烦人，你只要在编译时加上 --no-cache 参数即可
sass --watch --no-cache ./scss/:./css/
6.一点点问题。在使用 SCSS 的过程中我发现它居然不支持中文，想来肯定是 Ruby 的设置有问题，最终怎网上找到了解决办法。首先在 Windows 的环境变量中添加 RUBYOPT 变量，值设为 -KU 。然后在你的 SCSS 文件第一行加上@charset "UTF-8";，再编译就能完美支持中文了。（ Ruby 达人能告诉我这是为什么吗？）
WebStorm配置方案
