Sass(Scss)是世专业级CSS扩展语言
兼容CSSSass完全兼容所有版本的CSS，可以无缝地使用任何可用的CSS库。
特性丰富Sass拥有比其他任何CSS扩展语言更多的功能和特性。
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用 变量 、 嵌套规则 、 mixins 、 导入 等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库 一同使用时。
第一步安装 Sass gem：
如果你使用的是 Windows， 就需要先 安装 Ruby 。
如果要在命令行中运行 Sass ,只要输入
你还可以命令 Sass 监视文件的改动并更新 CSS ：
如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：
使用 sass --help 可以列出完整的帮助文档。
SASS提供四个 编译风格 的选项：
生产环境当中，一般使用最后一个选项。
SASS的官方网站，提供了一个 在线转换器 。可以进行练习。
SASS允许使用变量
SassScript 还支持所有其他 CSS 属性值类型， 例如 Unicode 范围和 !important 声明。 然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。
编译后
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
支持数字的标准运算（加 +、减 -、乘 *、除 /和取模 %）,数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。
编译后
所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算。 例如：
编译后
编译后
编译后
Mixins允许您定义可以在整个样式表中重新使用的样式
编译后
编译后
编译后
完整的案例： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.scss
编译后： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.css
参考：
阮一峰老师的SASS用法指南
SASS官方参考手册
本文前提 是电脑里已经顺利安装了ruby,sass等之后，再进行webstorm中配置sass的watcher，以及改变watcher中的默认选项；如果以上都还没有做，可以自行百度解决，很容易找到的；
本文使用的webstorm为11.0版本
点击左上角的 *File→Settings→File Watchers ***
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作：
其中黄色的地方都要填好，program那里是你安装ruby中响应的scss.bat的路径，如果安装ruby时，你不是按照默认c盘路径按装的话，那么那里是需要需改的；
按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的 ：
1、Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css
注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.
举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.
如图所示：
2、 Output paths to refresh:
改成这样: .css: .css.map
经过以上配置就实现了， webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
这里需要注意两点：
1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561
