利用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文件，文件就会自动编译，特别方便。

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

最后，谢谢你们。