实战Sass3.3的Source Maps

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

新发布的Sass 3.3版本,将Source Maps正式纳入了Sass中。这也成为Sass新版本的一大亮点,一大新功能。让广大Sass爱好者可以直接在浏览器中更容易调试自己的代码和Debug相关操作。其实早在2013年七月份Umar Hansa在《Developing With Sass and Chrome DevTools》就详细介绍了如何使用Sass的Source Maps功能帮助大家在浏览器中更好的调试SCSS(或Sass)代码。文中有一张gif的动画演示图,可以一展Source Maps的魅力:

实战Sass3.3的Source Maps

如果你不太喜欢阅读英文,或以移步阅读早前发布的一篇有关于Sass调试的教程

虽然中英文教程都有,但在群里不时会有很多同学问,如何在浏览器中调试?如何开启浏览器的Source Maps功能?我的浏览器为什么不能开启?我的浏览器为什么没有Source Maps的功能?等等一系列的问题。那么今天我就老调重谈,通过自己在Chrome和Firefox测试版本中的实战和大家聊聊如何使用Sass Source Maps功能。

什么是Source Maps?

在当今天现代化的工作流程中,我们在开发环境中编写代码已经有了很大的变化。而Source Maps又发挥了其具大的作用,可能在生产代码中直接精确映射出原始开发的代码。而Source Maps并不单一的仅为Sass这样的预处理器语言服务。我们来看一个对Source Maps的简单描述:

Source maps offer a language-agnostic way of mapping production code to the original code that was authored.

我对Source Maps简单的理解就是,我可以在生产代码中直接找到对应的原始开发代码,而且还能实现精确的映射。这样我们在浏览器查看渲染出来的代码时,我可以找到对应的代码,然后精确映射到原始的开发代码中。这样提供了一个优势,开发人员更便于阅读代码和调试代码。

上面似乎说的有些啰嗦,那么我在这里仅拿一个示例来演示Source Maps在使用Sass进行开发项目时,给开发者带来的优势。至于Source Maps其他功能的应用,你要是感兴趣可以阅读Sayanee Basu写的教程《Source Maps 101》。

接下来,我们还是回到Sass的Source Maps当中来吧。

浏览器

到目前为止,支持Soure Maps的浏览器并不是所有的都支持,在写这篇文章之时,我仅知道Chrome v23+Chrome Canary v29+Firefox 29测试版本。本文以下测试所使用的浏览器版本为:

  • Google Chrome 版本号:33.0.1750.149
  • Firefox Aurora 版本号:29.0a2
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-3.3-source-maps.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部