🎨 LESS 转 CSS 编译器

粘贴 LESS 代码,即可使用官方 less.js 引擎立即编译为 CSS。支持变量(@var)、嵌套、混入、运算和内置函数。

🔒 编译完全在浏览器中进行,您的代码不会发送到服务器。连 less.js 库也由本站直接提供,而非 CDN。

LESS 输入

CSS 输出

了解更多

LESS(Leaner Style Sheets)是一种扩展 CSS 的预处理器语言,在 CSS 之上增加了变量、嵌套、混入和运算等编程功能。浏览器只能理解纯 CSS,因此部署前需要将 LESS 编译为 CSS。本工具在浏览器中运行官方 less.js 引擎来即时完成该转换。

用变量(@brand: #4A90D9;)集中管理颜色和尺寸,通过嵌套选择器直接反映结构。用混入(.rounded(6px))创建可复用的样式块,并可使用 (@pad * 2) 之类的算术运算以及 darken()、lighten() 等内置颜色函数。

本工具完全在浏览器中编译,绝不上传您的输入。出于安全考虑,LESS 的内联 JavaScript 功能(反引号语法)已被禁用,因此无需 eval 即可安全运行。对于大型项目,建议将 LESS 集成到构建流程(webpack、Vite、lessc 等)中。

我的 LESS 代码会被发送到服务器吗?

不会。编译完全在浏览器的 JavaScript 中进行,代码不会发送到任何地方。

可以用 @import 引入外部文件吗?

在浏览器环境中对外部文件的访问受限,远程 @import 可能会失败。本工具最适合编译单文件代码片段。

可以使用 LESS 的内联 JavaScript(反引号)吗?

不可以。出于安全考虑,JavaScript 执行功能已关闭。变量、混入、运算等所有标准功能均可正常使用。

也能编译 SCSS/Sass 吗?

不能,本工具仅支持 LESS。LESS 与 SCSS 语法不同。