看一段sass代码：
嵌套书写的结构在sass中经常会被用到。
编译之后的样式是这样的：
在开发工具上我们看到的是编译后的文件，而非编译前的源文件。
这个时候就产生一个问题了。在生产环境中，我希望看到的未经编译文件的调试信息，而非编译后的，因为这样会极大的方便开发人员。就像上面的截图，你能在scss文件下，快速定位到这些代码的位置吗？
~~~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
好在，sass在3.3.0之后版本提供了sourcemap功能。至于什么是sourcemap,这里有个链接大家可以参考下。
http://code.tutsplus.com/tutorials/source-maps-101--net-29173
本人本地依赖 Ruby来编译scss文件，如果你没安装Ruby，请自行安装，相关教程可以google......
如果你本地没有安装Ruby,只要装有node.js和Grunt，同样的，它们也可以用来编译scss文件.
本地装有Ruby的同学得首先确定sass(3.3.0+)和compass是否已经安装就绪。
命令行下运行：
1.gem list
如果没有安装这两个包的同学请执行：
1.gem install sass --pre2.gem install compass --pre如果是版本过于陈旧请执行：
1.gem update sass~~~~~~~~~~~~~~~~~~~~我是傲娇的分割线~~~~~~~~~~~~~~~~~~~~~
安装好sass和compass后，我们本地建立一个测试用的项目。
目录结构如下：
sass目录下有一个li.scss文件，我们的任务就是把li.scss编译到css目录下，同时生成sourcemap文件。
获取sass的相关用法可以在命令行下输入：
1.sass --help进入项目根目录，命令行下输入：
1.sass --sourcemap --style compact --watch sass:css
这时sass目录下的scss文件都处于被监听的状态，一旦文件被修改，便会及时编译到css目录下，同时生成相应的sourcemap文件。当然，编译的同时，命令行下的窗口会输出相应的信息，以便开发者调试。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美丽不可方物的分割线~~~~~~~~~~~~~~~~~~~
到这一步，我们已经成功生成了sourcemap文件，可惜的是，在浏览器下查看，我们仍未看到相对应的scss文件。
这是为什么呢？我们拥有了souremap文件，却缺少了相应的解析工具。
Chrome是支持sourcemap的，但要使用该功能，我们得首先开启它。
开启的步骤很简单，我就不过多描述了，大家看下面的截图就好了。哦，还有，推荐大家把chrome的版本升到33+，因为我不确保较低版本的chrome能否支持sourcemap。
“F12”，调出开发者工具，点击如下图标：
在弹出的面板里，选择：
重启你的chrome。
回到页面下，这个时候你就可以看到sourcemap起作用了。
这个时候，若你想修改scss文件，根据行号便可以快速定位，非常方便。