Art2-一款实时查看UI效果的css编辑器

10次阅读

共计 414 个字符,预计需要花费 2 分钟才能阅读完成。

原始的写 css 方式

我们写 css 时,一般都是写好保存,然后在浏览器查看 UI 效果,不满意再在调试工具里调试,最后再将满意的 css 复制到编辑器。这其实是很低效的。Art2 就是为了解决这个问题而诞生的,它可以跳过这些步骤,直接一边修改源码,一边查看 UI 效果,大幅度提升开发效率!

用 Art2 写 css

可以看到,我们每写完一行 CSS 代码,页面的 UI 效果也实时展现,而且不需要重新加载页面

这是在 Vue 项目里使用 Art2,它将 Vue 文件里 style 标签的内容进行修改,UI 效果几乎是同步查看的

快速定位 css 位置

当我们的 css 几百几千行的时候,这个功能是非常高效的,一秒找到对应的样式,然后对 css 进行编辑

Art2 可支持 css、scss、less 三种语法

细心的同学应该注意到,当鼠标移动到 DOM 节点上的时候,会出现和浏览器调试工具一样的 debug 效果,可以显示元素的长宽、padding、margin 和位置信息,这非常利于我们调试页面。

Art2 官网


正文完
 0