css.map作用

看一段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是否已经安装就绪。

命令行下运行：

view sourceprint?

1.gem list

如果没有安装这两个包的同学请执行：

view sourceprint?

1.gem install sass --pre

2.gem install compass --pre

如果是版本过于陈旧请执行：

view sourceprint?

1.gem update sass

~~~~~~~~~~~~~~~~~~~~我是傲娇的分割线~~~~~~~~~~~~~~~~~~~~~

安装好sass和compass后，我们本地建立一个测试用的项目。

目录结构如下：

sass目录下有一个li.scss文件，我们的任务就是把li.scss编译到css目录下，同时生成sourcemap文件。

获取sass的相关用法可以在命令行下输入：

view sourceprint?

1.sass --help

进入项目根目录，命令行下输入：

view sourceprint?

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文件，根据行号便可以快速定位，非常方便。

来自为知笔记(Wiz)