sass、less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics
CSS预处理器
css preprocessor
预处理器即preprocessor,预处理程序。
它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。（因为浏览器支持的还是CSS）
Less
Sass,Scss
Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
Less,Sass,Scss编译
Sass,Scss
这是 安装sass
gem install sass
安装之后可以如下操作：
可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS 提供四个不同的编译风格：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
当然，编译工具Koala最方便了
对Less,Sass都是支持的
Sourcemap调试
利用sourcemap来调试sass JavaScript Source Map 详解 Source Maps 101
Source Map
In today's modern workflow, the code that we author in our development environments is considerably different(有很大的不同) from the production code, after running it through compilation, minification, concatenation, or various other optimization processes.
This is where source maps come into play, by pointing out the exact mapping in our production code to the original authored code. （即指出源码和最终代码之间的对应关系）
Source Map，它是一个独立的map文件。
简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
启用 Source Map
只要在转换后的代码尾部，加上一行就可以了。
/*# sourceMappingURL=style.css.map */