sass调试

sass调试需要开启编译时输出调试信息和浏览器调试功能,两者缺一不可。

开启编译调试信息

目前sass的调试分为两种,一种为开启 debug-info,一种为开启 sourcemap(这个将成为主流)。

如开启的是 debug-info,则解析的css文件中会有以 @media -sass-debug-info开头的代码,如没有则表明没有开启。

如开启的是 sourcemap,则在解析的css文件同目录下生成一个 .css.map的后缀名文件。

命令行开启

两个的命令分别为 --debug-info--sourcemap,开启如下:

sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap

koala开启

如下图:点击相应的文件,然后就会出现右边的编译选项,即可选择是否开启 source mapdebug info

koala setting

开启浏览器调试

谷歌浏览器调试

F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在 general选项中勾选 Enable CSS source mapAuto-reload generated CSS

open chrome css source map

开启 --sourcemap编译, f12打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件

chrome scss

点击scss文件,会跳到 source里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择 savesave as命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要 ctrl+s保存修改就可以在浏览器中看到修改效果了。

chrome scss source

火狐浏览器调试

debug-info调试

firefox可以安装插件 FireSass使用 debug-info来调试。

开启 --debug-info编译, f12打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件

firefox debug

sourcemap调试

firefox 29 将会开始支持 sourcemap,注意是火狐自带的调试功能,而不是firebug。

开启 --sourcemap编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。

firefox sourcemap

点击scss文件,这样就跳到了scss文件。如下图:

firefox sourcemap

然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。

firefox sourcemap

ps:我用29 beta版本的时候这个功能不太稳定,估计到稳定版本应该就好了。同时期待 FireSass这个插件升级支持sourcemap。