css – Less/Sass调试在Chrome开发工具/ Firebug

前端之家收集整理的这篇文章主要介绍了css – Less/Sass调试在Chrome开发工具/ Firebug前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你怎么做维护CSS的建立与Less / Sass?

我喜欢Dev Tools / Firebug的一个事情是能够看到css造型的行号。有没有好的方法来做这个CSS预处理器,而不必手动搜索.less / .scss文件找到我想修改代码

解决方法

Chrome开发者工具现在支持Sass调试即开即用。

已更新为包含源地图:
以前的版本在css中使用内联注释来提供对源代码的引用(见下面的how-to)。最新版本的sass(3.3)和chrome(31)使用源映射:

>确保你有Sass 3.3.x
>使用–sourcemap标志编译Sass。
>在Chrome / ium DevTools中打开设置,然后点击常规。
>打开“启用CSS源映射”。

有关详情,请访问Chrome开发工具博客
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

旧版本:首先,你应该编译你的Sass与–debug信息打开。2.在Chrome / ium中转到about:flags3.启用开发工具实验4.在检查器(F12)中,打开“设置”,然后转到“实验”选项卡并选中“支持SASS”。

猜你在找的CSS相关文章