跳转到主要内容
jyj1993126 提交于 23 November 2014

最近在学习大名鼎鼎的css预处理语言sass, 有一些小技巧想跟大家分享一下

    在网上看到一篇使用chrome调试sass的教程,比较繁琐。需要首先开启sass转义监听

    sass --watch --scss --sourcemap XXX.scss:XXX.css

    然后开启chrome的Enable css source map选项,然后在chrome中找到css文件,查看source找到sass文件,修改再保存,再刷新浏览器查看。

    然后我就想能不能使用brackets来调试呢?

    brackets在前端IDE里面也算大名鼎鼎了,其中最出色的功能就是在编辑器中所作的修改在浏览器里无需刷新,实时预览。除此之外,还有很多对前端开发者很有好的功能,比如ctrl + E快速编辑。同时,它也是完全免费的开源软件。

    那么怎么用brackets调试sass呢?

    先用sass --watch sass/:css/  (这里监听目录)   开启编译监听,无需sourcemap之类的参数

    然后到brackets中打开HTML目录,开启实时预览,然后打开目录下的sass文件:

qqjie_tu_20141123212719.png

使用ctrl + E 快速编辑修改颜色,然后直接ctrl + s就能直接在浏览器上看到变化了!

板块
标签
Drupal 版本