风格一致:Less To 标准CSS — Numio
在浏览器中将 Less 编译为 CSS。变量、嵌套、mixin 和运算由官方 less.js 编译器展开为普通 CSS,无需安装 lessc 即可检查输出。
检查 Less 变量、嵌套和 mixin 生成的 CSS。
Less
CSS
适用场景
- 检查 Less 变量、嵌套和 mixin 生成的 CSS。
- 为使用普通 CSS 的项目转换小型 Less 文件。
使用方法
- 粘贴 Less 代码或打开 .less 文件。
- 根据目标浏览器选择厂商前缀设置。
- 检查生成的 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 才能被浏览器使用。