1

chrome 27+ 的 SCSS调试

 2 years ago
source link: http://www.btorange.com/2013/05/23/scssdebug.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
您的位置:主页 > HTML/JS > chrome 27+ 的 SCSS调试

chrome 27+ 的 SCSS调试

23 5月 2013

Chrome在更新到27后,之前的SCSS的debug info就不显示,刚开始还以为是更新后默认恢复了开启的试验选项,各种把 启用开发者工具实验Support for Sass 开了又关,关了又开,怎么也木有效果。

终于找到这个的解决办法:http://snugug.com/musings/debugging-sass-source-maps

原来Chrome27+只支持Source Maps,Source Map是一个JSON文件,而它包含了代码转换前后的位置信息:

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 都简洁了很多。

OVER: 亲,你终于回来拉

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬
03e4054a41972ab7d4268c088c7be3f9?s=64&d=mm&r=g

留言万岁!吹水有益健康! 取消回复

评论

名称 *

邮箱 *

站点

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK