它是一个LESS 代码的“翻译器”。
LESS 是一种写 CSS 的“高级写法”,能用变量、嵌套、函数、运算,让样式代码更好写、更好维护。但浏览器只认普通 CSS,所以 LESS 写完后得“编译”一遍才能用。
这个小工具就是干这个的——你把 LESS 代码贴进去,它立刻给你转成标准 CSS,省去装编译环境、敲命令行的麻烦。
主要能做什么?
LESS 转 CSS:粘进去,点一下,标准 CSS 就出来了。
实时编译:默认开着,改一个字符,结果马上更新,不用点按钮。
压缩代码:勾选后,输出的 CSS 会自动去掉空格、换行,体积更小。
严格数学计算:勾选后,LESS 里的算式按标准数学规则算,避免歧义。
编译统计:
源码大小
生成大小
压缩比例(生成 / 源码)
编译耗时(毫秒)
错误提示:LESS 写错了会告诉你第几行、第几列、上下文是什么。
Demo 示例:点一下自动填入一段带变量、嵌套、mixin 的 LESS,直接看效果。
复制 CSS 结果:一键复制。
下载 CSS 文件:导出成 style.css,直接拿去用。
清空代码:一键重置。
适合谁用?
前端开发者:写 LESS 时快速验证编译结果。
网页设计师:不装编译工具,直接看 LESS 转出来的 CSS。
学 LESS 的人:边写边看编译结果,理解嵌套、变量、mixin 怎么变成 CSS。
接手老项目的人:把 LESS 源码转成 CSS 看看结构。
写教程的人:做示例时快速生成 CSS 代码。
任何需要 LESS 转 CSS 的人:不用装 Node.js、不用配环境。
用起来是什么感觉?
打开页面,顶部是一个深色大卡片,写着“在线 LESS 转 CSS 编译器 .less”,下面有三选项开关:
实时编译(默认开)
压缩代码
严格数学计算
中间是编辑区,左右两块:
左边是 LESS 源码输入,可以粘、可以敲
右边是 CSS 编译结果,只读,编译好自动出现
下面是编译统计区,四块小面板:
源码大小
生成大小
压缩比例
编译耗时
每块右边都有“复制”按钮。
底部五个按钮:
立即编译(绿色):手动触发一次
加载 Demo 示例:填入一段带变量和嵌套的 LESS,直接看效果
复制 CSS 结果:整段复制
下载 CSS 文件:导出成 style.css
清空代码:清空重来
操作流程就是:
把 LESS 代码粘到左边
右边几秒内出现编译后的 CSS(实时编译模式下自动触发)
想压缩就勾“压缩代码”
点“复制”或“下载”拿走结果
写错了也不怕,右边会显示错误信息,告诉你在哪一行、哪一列出错。
对写 LESS 的人来说,比装编译器、敲命令行快多了,打开网页就能用。