跳到主要内容

风格一致:Less To 标准CSS — Numio

在浏览器中将 Less 编译为 CSS。变量、嵌套、mixin 和运算由官方 less.js 编译器展开为普通 CSS,无需安装 lessc 即可检查输出。

检查 Less 变量、嵌套和 mixin 生成的 CSS。

Less

CSS

适用场景

  • 检查 Less 变量、嵌套和 mixin 生成的 CSS。
  • 为使用普通 CSS 的项目转换小型 Less 文件。

使用方法

  1. 粘贴 Less 代码或打开 .less 文件。
  2. 根据目标浏览器选择厂商前缀设置。
  3. 检查生成的 CSS,然后复制。

Less 输入

@primary: #2563eb;
.button {
  color: @primary;
  &:hover { text-decoration: underline; }
}

CSS 输出

.button {
  color: #2563eb;
}
.button:hover {
  text-decoration: underline;
}

功能与限制

未定义的变量或未闭合的括号会中止编译。排查错误时先从短片段开始。

编译在浏览器中运行。@import 外部 URL 可能使浏览器请求该资源,建议使用自包含的代码。

无法使用其他本地文件的导入、Less 插件和项目特定的编译选项。厂商前缀取决于目标浏览器设置。

FAQ

这和用 lessc 编译一样吗?

它使用 less.js,与 lessc 运行的是同一个编译器,因此自包含的文件在默认选项下会编译出相同的 CSS。本地导入和插件等项目功能在这里不可用。

能编译使用 @import 的文件吗?

指向你电脑上其他文件的导入无法在浏览器中解析。请把被导入的代码直接粘贴进来,或用 lessc 编译整个项目。

Less 和 CSS 有什么区别?

Less 是 CSS 预处理器。它增加了变量、嵌套、mixin 和函数,必须先编译为 CSS 才能被浏览器使用。

规范与参考资料