您的位置:主页 > HTML/JS > chrome 27+ 的 SCSS调试

chrome 27+ 的 SCSS调试

我一直用chrome的正式版进行开发,Chrome在更新到27后,发现SCSS的debug info就怎么也不显示,我刚开始还以为是更新后默认恢复了开启的试验选项,各种把 启用开发者工具实验Support for Sass 开了又关,关了又开,怎么也木有效果,浏览器都重装了一次也没来把调试信息唤回来~~~你跑那里去了啊~~~亲。

花了整整半天,终于找到这个的解决办法:http://snugug.com/musings/debugging-sass-source-maps
原来Chrome27+只支持Source Maps,你说咋也不向下兼容一下,怎么解决呢:

 

怎么解决呢?

1.确保开启除了原有的Support for Sass 再开启Enable source maps

 

2.把sass升级到3.3,因为目前3.3版本还不是正式版,用gem install sass --pre 3.3.0.alpha.138之后的版本还会要求有listen ,在安装下listengem install listen

 

3.编译时候加上 --sourcemap,例如:sass --sourcemap --watch pop.scss : pop.css

 

你就会看到除了输出.css的文件外,新增了一个.css.map文件

我们打开css文件看看,里面只在最后追加了一句/*@ sourceMappingURL=pop.css.map */相比之前的debug info 和 line comments 都简洁了很多。

map 里面的东西大概就是下面这个样子的,简直不明觉厉,不知道怎么记行数的,反正很牛逼。

 

OVER: 亲,你终于回来拉

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

留言万岁!吹水有益健康!