CSS 预处理器互转
Less / Sass / SCSS / Stylus · 命令行编译指引 · 浏览器内编译
Less/Sass 编译
Less↔CSS/Sass/SCSS/Stylus
421 次访问
命令行编译方案
Less
npm install -g less
lessc input.less output.css
# 监听
lessc input.less output.css --watch
Sass / SCSS
npm install -g sass
sass input.scss output.css --watch
# 嵌套缩进风格
sass --indented input.sass output.css
Stylus
npm install -g stylus
stylus input.styl -o output.css
stylus -w input.styl # 监听
CSS → SCSS / Less（转换工具）
# css2sass: 平铺 CSS → 嵌套 SCSS
npm install -g css2sass
css2sass input.css
浏览器内编译（实验）
浏览器内可用 less.js 直接编译 Less：
<link rel="stylesheet/less" href="styles.less">
<script src="https://lib.baomitu.com/less.js/4.1.3/less.min.js"></script>
语法差异速查
· 变量：Less @var / Sass $var / Stylus var（无前缀）
· 嵌套：都支持 · Stylus 可省略 {} ;
· Mixin：Less .mixin() / SCSS @include mixin
· 导入：Less @import "x.less" / SCSS @use "x"（新）
· 推荐：新项目用 SCSS（Dart Sass 是事实标准，Vite 原生集成）
关于本工具
了解工具定位 · 使用场景 · 对比优势
将 Less 或 Sass/SCSS 代码实时编译为 CSS，支持在 Less、Sass、SCSS、Stylus 四种预处理器之间互相转换。前端开发者调试样式、迁移旧项目、对比不同语法差异时使用。粘贴代码即可编译，全部在浏览器本地完成，代码不上传服务器。
使用场景
迁移 Sass 到 Less
前端团队接手一个使用 Sass 编写的旧项目，但新团队标准是 Less。手动转换数百个 .scss 文件耗时且易错。使用本工具，直接粘贴 Sass/SCSS 代码，一键编译为 Less 语法，保留变量、嵌套、mixin 等核心结构，将迁移时间从数天压缩到数小时。
调试嵌套层级
CSS 预处理器中深层嵌套（如 5 层以上）生成的最终 CSS 选择器冗长且难以调试。前端开发者编写 Less 嵌套时，可实时预览编译后的 CSS 输出，快速发现因嵌套过深导致的特异性冲突或冗余选择器，优化代码可维护性。
跨预处理器协作
设计系统团队同时维护 Less 和 Stylus 两套样式源文件，成员习惯不同。使用本工具将 Stylus 代码转为 Less，确保设计 Token（颜色、间距、字体）在两种预处理器中完全一致，避免因语法差异导致的样式偏差，提升协作效率。
快速原型验证
产品经理给出一个用 SCSS 写的样式原型，前端开发者需要快速将其转为项目使用的 Less 语法。不必手动重写变量名和运算逻辑，直接粘贴 SCSS 代码，本工具自动转换，几分钟内即可将原型集成到 Less 项目中，加速迭代周期。
对比矩阵本工具 vs 竞品 vs 传统方法
| 维度 | 本工具 | 竞品 A（CodePen） | 传统方法（本地环境） |
|---|---|---|---|
| 数据隐私 | 纯浏览器编译，代码不上传服务器 | 代码上传至 CodePen 服务器 | 代码完全在本地，不涉及网络传输 |
| 处理速度 | 1 秒内完成单文件编译 | 取决于网络延迟和服务器负载，通常 1-3 秒 | 取决于本地硬件和项目规模，大型项目首次编译可能需数秒 |
| 离线可用 | 完全离线可用 | 必须联网 | 完全离线可用 |
| 环境配置 | 零配置，打开即用 | 需注册账号，但无需本地安装 | 需安装 Node.js、npm、Less/Sass CLI 等，配置复杂 |
| 文件导入 | 仅支持单文件或粘贴代码 | 支持导入外部 CSS 库和 JS 库 | 支持 @import 本地文件、使用 Webpack 等模块打包器 |
| 适用场景 | 快速测试代码片段、学习语法差异 | 在线演示、原型设计、团队协作 | 正式项目开发、大型工程、需要完整构建流程 |
| 输出格式 | Less ↔ CSS / Sass / SCSS / Stylus | 仅显示 CSS 编译结果 | 可自定义输出格式、压缩、Source Map 等 |
使用指南
上手步骤 · 输入输出 · 避坑提示
使用步骤
- 在左侧编辑区粘贴或输入 Less/Sass/SCSS/Stylus 源码
- 从顶部下拉菜单选择目标格式：CSS、Less、Sass、SCSS 或 Stylus
- 点击「编译」按钮，右侧预览区即时显示转换后的代码
- 点击「复制」按钮将结果复制到剪贴板，或直接下载为 .css/.less/.scss 文件
输入输出示例7 个典型场景，覆盖常规、边界与易错
| 输入 | 输出 | 说明 |
|---|---|---|
| .box { color: red; } | .box { color: red; } | 典型常规场景：基础 Less 变量编译 |
| @primary: #333; .header { color: @primary; } | .header { color: #333; } | 常见用法：变量替换编译 |
| .mixin(@color) { color: @color; } .foo { .mixin(blue); } | .foo { color: blue; } | 典型场景：带参数 Mixin 编译 |
| /* 空文件 */ | 边界 case：空输入直接输出空字符串 | |
| .box { color: red; } | .box { color: red; } | 边界 case：纯 CSS 输入（无 Less 语法）原样输出 |
| @var: 10px; .box { width: @var + 5; } | .box { width: 15px; } | 易错 case：Less 运算需加单位，否则报错 |
| .box { color: red; } | .box { color: red; } | 易错 case：用户误将 Sass 语法（$var）当 Less 输入 |
常见错误对照8 个常踩的坑 · 错误 → 修复
1. Sass 变量名混用连字符与下划线
错误
$my-variable: 10px; .box { width: $my_variable; }修复
$my-variable: 10px; .box { width: $my-variable; }Sass 视连字符和下划线为同一字符（$my-variable 与 $my_variable 等价），但 SCSS 编译器不会报错，易造成混淆
2. Less 混入（mixin）调用时漏掉括号
错误
.my-mixin;修复
.my-mixin();Less 中无参 mixin 调用必须带括号（.my-mixin()），否则会被当作普通类选择器，不会展开 mixin 内容
3. SCSS 嵌套时使用父选择器 & 错误位置
错误
.btn { & .icon { color: red; } }修复
.btn { .icon { color: red; } }& 代表父选择器本身，.btn & .icon 会生成 .btn .icon，与不加 & 结果相同；错误使用 & 会生成 .btn.btn .icon
4. Stylus 缩进不一致导致解析错误
错误
.box
color red
font-size 14px修复
.box
color red
font-size 14pxStylus 依赖缩进层级，子属性必须与父属性同级缩进；多缩进会被视为嵌套，导致编译失败或意外结构
5. Less 中 @import 未加 (reference) 导致重复输出
错误
@import 'variables.less';修复
@import (reference) 'variables.less';Less 默认 @import 会输出文件所有内容；若只需变量/混入，加 (reference) 可只引用不输出，避免重复样式
6. Sass/SCSS 中 %placeholder 选择器误用为类名
错误
%my-placeholder { color: red; } .box { @extend %my-placeholder; }修复
%my-placeholder { color: red; } .box { @extend %my-placeholder; }%placeholder 本身不会生成 CSS，仅用于 @extend；若直接写 .my-placeholder 则会输出空类，浪费体积
7. Less 中除法运算未加括号
错误
width: 100px / 2;修复
width: (100px / 2);Less 3.0+ 中除法必须用括号包裹，否则会被当作 CSS 原生除法（不计算），编译后仍是 100px / 2
8. SCSS 中 @extend 链式继承导致选择器爆炸
错误
.a { color: red; } .b { @extend .a; } .c { @extend .b; }修复
使用 @mixin 或 %placeholder 替代链式 @extend@extend 会复制选择器到所有引用处，链式继承会使选择器组合指数增长，最终 CSS 体积膨胀
工作原理
公式推导 · 流程图解 · 依据出处
核心公式
Less/Sass 编译本质是 AST 转换：T(CSS) → CSS，其中 T 为 Less/Sass 解析器实现的语法树变换函数
变量说明
T— Less/Sass 编译器实现的变换函数CSS— 输入的 Less/Sass/SCSS/Stylus 源码CSS— 输出的标准 CSS 代码
示例
输入 Less 源码：@primary-color: #3498db; .btn { color: @primary-color; }。编译器 T 解析变量 @primary-color，替换为 #3498db，输出 CSS：.btn { color: #3498db; }。
适用范围
适用于 Less、Sass、SCSS、Stylus 四种预处理器语法。不适用于 PostCSS 插件或纯 CSS 文件（无变量/嵌套等预处理特性）。基于 W3C CSS 规范及各预处理器官方解析器实现。
原理图
用户输入
本地处理
输出结果
开发者集成
3 种主流语言 · 复制即用
import subprocess
import tempfile
import os
# 使用 lessc 编译 Less → CSS
less_code = """
@color: #4D926F;
#header {
color: @color;
}
"""
with tempfile.NamedTemporaryFile(suffix='.less', mode='w', delete=False) as f:
f.write(less_code)
input_path = f.name
output_path = input_path.replace('.less', '.css')
try:
subprocess.run(['lessc', input_path, output_path], check=True, capture_output=True)
with open(output_path) as f:
print(f.read()) # #header { color: #4D926F; }
finally:
os.unlink(input_path)
if os.path.exists(output_path):
os.unlink(output_path)package main
import (
"fmt"
"os"
"os/exec"
"path/filepath"
)
func main() {
// 使用 sass 命令行工具编译 SCSS → CSS
scss := `
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}`
dir, _ := os.MkdirTemp("", "sass")
defer os.RemoveAll(dir)
src := filepath.Join(dir, "style.scss")
os.WriteFile(src, []byte(scss), 0644)
cmd := exec.Command("sass", src, filepath.Join(dir, "style.css"))
if err := cmd.Run(); err != nil {
panic(err)
}
out, _ := os.ReadFile(filepath.Join(dir, "style.css"))
fmt.Println(string(out))
// body { font: 100% Helvetica, sans-serif; color: #333; }
}const less = require('less');
// 使用 less.js 在 Node.js 中直接编译
const input = `
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}`;
less.render(input)
.then(output => {
console.log(output.css);
// #header { width: 10px; height: 20px; }
})
.catch(err => console.error(err));常见问题
8 个高频疑问
这个在线工具支持 Less 转 Sass/SCSS 吗？具体怎么操作？
支持。在左侧输入框粘贴 Less 代码，右侧下拉框选择「Sass」或「SCSS」作为输出格式，点击「编译」按钮，右侧结果区即时显示转换后的代码。工具也支持反向转换：Sass/SCSS 转 Less、Less 转 CSS、Stylus 转 Less 等。所有转换都在浏览器内完成，无需上传文件，粘贴代码即可使用。
为什么我写的 Less 嵌套规则编译后样式不对，和本地编译结果不一样？
先检查 Less 语法是否严格符合标准——比如变量声明用 @ 而不是 $（那是 Sass 的写法），Mixins 调用用 .mixin() 而不是 @include。本工具基于 Less 3.13 核心解析器，与官方 lessc 编译结果一致。如果本地用的是 gulp-less 或 webpack 的 less-loader，它们的版本可能不同。建议先在本工具中编译一次，对比输出差异，排查语法兼容性问题。
编译出来的 CSS 代码量很大，有没有办法压缩或者优化？
本工具目前输出的是标准格式化 CSS，不带压缩功能。如果需要压缩，可以将编译结果复制到 CSS 压缩工具（如 CleanCSS 在线版）中处理。Less 本身也支持通过插件（如 less-plugin-clean-css）在编译时压缩，但本工具为保持功能聚焦，未集成压缩插件。建议编译后再做一次压缩步骤，或者直接使用支持压缩的本地构建工具。
这个工具和本地用 Node.js 安装的 lessc 有什么区别？功能一样吗？
核心编译能力一致——都基于 Less 官方解析器。区别在于：1）本工具在浏览器内运行，无需安装 Node.js，打开即用；2）不支持 Less 插件（如 autoprefixer、clean-css 插件），因为浏览器环境无法加载 Node 模块；3）不支持 @import 本地文件路径，只能将依赖代码手动合并粘贴到输入框。适合快速调试单文件或临时转换场景，大型项目仍建议使用本地命令行工具。
Less 和 Sass 的语法混在一起了，这个工具能自动识别并帮我统一吗？
不能自动识别混合语法。工具要求输入是单一预处理器语法——比如输入框全部是 Less 代码，或全部是 Sass 代码。如果混写（例如用 $ 定义变量，又用 @ 定义 Mixin），编译会报错。建议先手动将代码按预处理器分离，分两次转换：先把 Less 部分转成 Sass，再把原 Sass 部分合并进去。或者，先用 Less 转 CSS，再用 CSS 转 Sass（会丢失变量和 Mixin 信息，仅保留样式结构）。
Stylus 代码转成 Less 后，有些功能用不了，比如没有括号的函数调用，怎么办？
Stylus 语法较为灵活（允许省略括号、冒号、分号），转换后可能会有兼容性问题。例如 Stylus 的 `color = red`（无冒号）在 Less 中必须写成 `@color: red;`。本工具转换时会尽量保留语义，但不会自动补全语法糖。建议：1）先确保 Stylus 代码本身是标准写法（括号和冒号齐全）；2）转换后手动检查变量名、Mixin 参数、条件语句（Stylus 的 `if` 在 Less 中需改为 `when`）；3）复杂的 Stylus 循环（如 `for`）Less 不支持，需要重构为递归 Mixin。
这个工具会保存我的代码吗？公司项目代码传上去安全吗？
代码不会离开你的浏览器。所有编译操作由浏览器内的 JavaScript 引擎（WASM 版 Less/Sass 编译器）完成，代码不会被发送到任何服务器。可以打开浏览器开发者工具的「网络」面板验证：输入代码点击编译时，没有任何 HTTP 请求发出。即使断网，工具仍然可以正常使用。公司敏感代码可以放心使用，不涉及上传和存储风险。
我想把 Less 里的 @import 多个文件合并成一个 Less 文件再转换，工具能处理吗？
不能。工具输入框只接受单段代码，不支持解析 `@import 'variables.less'` 这种文件路径引用。你需要手动将各个 Less 文件的内容复制粘贴到一个输入框中（注意变量和 Mixin 的定义顺序要正确）。如果项目有几十个文件，建议用本地 lessc 命令行工具配合 `--include-path` 参数来处理多文件依赖，或者使用构建工具（如 Webpack/Parcel）的 Less 加载器。本工具更适合单文件或小规模代码的快速转换。
相关工具
「时间 / 数字开发」下的其他工具