利用sourcemap来调试sass

最近项目用上了sass,作为css的预处理器，它可以让我们用程序化的思维书写样式，极大的简化了css的开发，实在是前端居家旅行必备的利器。

我们都知道，在项目中，样式的频繁调试是不可避免的，用上sass虽说coding代码量减少，但调试过程着实让人崩溃。

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

命令行下运行：

gem list

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

gem install sass --pre
gem install compass --pre

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

gem update sass

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

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

目录结构如下：



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

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

sass --help

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

sass --sourcemap --style compact --watch sass:css

这时sass目录下的scss文件都处于被监听的状态，一旦文件被修改，便会及时编译到css目录下，同时生成相应的sourcemap文件。当然，编译的同时，命令行下的窗口会输出相应的信息，以便开发者调试。



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美丽不可方物的分割线~~~~~~~~~~~~~~~~~~~

到这一步，我们已经成功生成了sourcemap文件，可惜的是，在浏览器下查看，我们仍未看到相对应的scss文件。



这是为什么呢？我们拥有了souremap文件，却缺少了相应的解析工具。

Chrome是支持sourcemap的，但要使用该功能，我们得首先开启它。

开启的步骤很简单，我就不过多描述了，大家看下面的截图就好了。哦，还有，推荐大家把chrome的版本升到33+，因为我不确保较低版本的chrome能否支持sourcemap。

“F12”，调出开发者工具，点击如下图标：



在弹出的面板里，选择：



重启你的chrome。

回到页面下，这个时候你就可以看到sourcemap起作用了。



这个时候，若你想修改scss文件，根据行号便可以快速定位，非常方便。

~~~~~~~~~~~~~~~~~~我是寂寞的分割线~~~~~~~~~~~~~~~~~

这里延伸一下。

许多同学都喜欢用webstrome来编写代码，其实我们利用其的File Watchers功能很方便就能编译scss文件。

‘Ctrl+Alt+S’调出setting面板，搜索“file watchers”。



点击“添加”按钮



弹出如下面板：



这里我们重点填写下面两项：

Program:xxxxx 这里填入你ruby安装目录下的scss.bat文件（windows系统下）

Arguments:xxx 这里输入的是编译时的一些参数，我这里输入的是：

--no-cache --sourcemap --style compact $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

配置完这些选项，当我们修改*.scss文件，文件就会自动编译，特别方便。

~~~~~~~~~~~~~~~~~~~~~~~~~~~写在最后的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最后，谢谢大家。