如何调试less & sass

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

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选项。

 

 

 

10 comments on “如何调试less & sass

  1. 不知道博主有没有更多关于sass的资料,怎么才能更好的写出高效的scss呢,最近在写感觉用的不是很顺,感觉自己有点滥用了mixin 等的东西,就像当初滥用class、div那样

    • Sass与LESS让人可以以类似编程的方式书写CSS,让我们有更好的方式管理CSS代码。比如把一些功能函数抽出来,单独放一个文件。页面一般都含有一些公共模块,把模块也可以抽离出来单独存放,等等。最好的学习方式就是阅读别人的代码,github上有很多优秀的项目可以学习,比如bootstrap-sass

      • 我想问一下,比如我想找某一个scss文件里面调用的一个变量。比如你bootstrap-sass _navbar.scss里面的grid-float-breakpoint这个变量。。我怎么找到他在哪里定义了这个变量?

        • 没太明白你的意思。你是想有没办法像Java等静态语言一样,在IDE中能看到函数的引用位置是吗?
          目前好像还没有编辑器支持哦。

  2. 我试用了你的 koala ,真如名字一样,可爱又易理解,非常好用,感谢你的努力!

    但小弟有个请求,不知道能否增加 ftp 功能,本地修改后直接上传至服务器,这样就更方便了。

    要是把 notpad 什么的整合在一起就更完美了~~你说对不对?

  3. 不好意思,问一个很低级的问题,不是很懂如何使在浏览器上调试的时候看到的是scss文件或者less文件中的信息

  4. I just want to know if u can incorporate Less new feature “extend”, koala compiler actually shows an error compilation screen.

angeli 进行回复 取消回复

电子邮件地址不会被公开。 必填项已用 * 标注

*