你的分享就是我们的动力 ---﹥

如何调试less & sass

时间:2013-08-19 09:54来源:www.chengxuyuans.com 点击:

很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。

less & sass 都无法在浏览器中直接执行,需要变成CSS。有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。

看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件 FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。

具体设置如下:

 

编译时添加参数:

sass开启debug-info选项:sass demo.sass demo.css –debug-info

less开启line-numbers:lessc demo.less demo.css –line-numbers=comments

这样,编译后的css中将包含调试信息:

 

 

 

 

 

 

浏览器设置:

firefox执行安装FireSass即可。

chorme:地址栏打开chrome://flags/,启用开发者工具实验 (Developer Tools experiments.)。重启浏览器后,打开开发者工具的设置选项卡,Experiments -> Support for sass 勾选。

 

 

 

 

 

 

最终调试效果:

 

=========================================================================================

less & sass 在官网上只提供命令行的方式编译文件,这实在是太低效了。这里向大家推荐一款工具来帮助我们后台自动编译less & sass。

koala

 

Koala项目地址:http://koala-app.com/index-zh.html

koala是一款开发者工具,负责对less、sass、coffeescript的编译工作,帮助web开发者更高效地使用less、sass、coffeescript开发。

功能特性:
多语言支持:支持less、sass、coffeescript 和 compass framework。
实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。
编译选项:可以设置各个语言的编译选项。
代码压缩:less & sass支持编译后自动代码压缩.
错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。
跨平台:windows、linux、mac都能完美运行。

 

如何在Koala中开启调试信息参数:

点击文件元素,在右侧展开的面板中勾选debug info选项。

 

 

 

 

转载注明地址:http://www.chengxuyuans.com/css/66461.html