CSS 预处理器转换工具
在 LESS、SCSS、SASS、Stylus 与 CSS 之间互相转换。转换为 CSS 时使用真实编译器，其他方向则采用启发式转换。
正在加载转换器...
使用方法
- 1 选择源语言和目标语言。
- 2 粘贴你的样式表。
- 3 结果会随输入实时显示。较大的库仅在首次需要转换时才会加载。
- 4 复制或下载转换结果。
为什么使用此工具
- 支持全部 5 种格式：LESS、SCSS、SASS（缩进式）、Stylus 和纯 CSS。
- 只要可行就使用真实编译器：<code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">less</code>、<code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">sass</code>、<code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">stylus</code>，用于所有转换为 CSS 的方向。
- 其余转换方向采用启发式变换（替换变量符号、重新格式化括号/缩进）——速度快，但不是完整的转译。
- 全程在客户端处理——你的样式表绝不会离开浏览器。
常见问题
哪些转换方向使用真实编译器？
LESS 转 CSS、SCSS 转 CSS、SASS 转 CSS 以及 Stylus 转 CSS 都使用官方编译器。其他转换方向则采用启发式方法——替换变量符号（@ 与 $ 互换）并重新格式化括号/缩进。
为什么 SCSS 转 LESS 只能用启发式方法？
目前并不存在从 SCSS 到 LESS 的原生编译器。这两种语言在混合宏（mixin）、控制指令和内置函数上存在差异。工具只会替换变量符号并给出提示——你可能还需要手动调整一些细节。
如果库加载失败会怎样？
工具会自动进行安全降级（graceful degrade），返回原始输入内容并附上“library unavailable”的提示。页面不会因此崩溃。
正在寻找 CSS 格式化工具？
刚好有——看看我们的 <a href="/css-formatter" class="underline">CSS Formatter</a>。
什么是 CSS 预处理器转换工具？
CSS 预处理器转换工具可在浏览器中直接对 LESS、SCSS、SASS、Stylus 与纯 CSS 之间的样式表进行转换。对于最终编译为 CSS 的方向，工具会调用真实编译器；对于其他转换方向，则采用启发式变换在各预处理器格式之间转写语法，整个过程完全在客户端完成。
功能特性
支持五种格式
在一个工具中即可完成 LESS、SCSS、SASS、Stylus 与 CSS 之间的相互转换。
尽可能使用真正的编译器
SCSS/SASS → CSS 使用 Dart Sass 编译器,因此嵌套和变量都能被正确解析。
100% 隐私保护
编译过程在你的浏览器中运行——不会上传任何内容。
示例
Input
.a { .b { color: red; } } (SCSS)Output
.a .b {
color: red;
}常见使用场景
-
1
将 SCSS 编译为 CSS
将嵌套的 SCSS 展开为纯 CSS,方便快速粘贴使用,或用于无需构建流程的页面。
-
2
在不同预处理器之间迁移
在切换工具链时,将样式表从 LESS 迁移到 SCSS(或反之)。
-
3
了解编译后的输出结果
准确查看你的 SCSS 嵌套和变量最终生成了怎样的 CSS。
Zerethon 的 CSS 预处理器转换工具可在浏览器中直接转换 LESS、SCSS、SASS、Stylus 和纯 CSS 之间的样式表。对于最终编译为 CSS 的路径,工具使用真正的编译器(例如 SCSS/SASS 使用 Dart Sass);其余预处理器之间的转换则采用启发式转换方式。所有处理均在客户端完成——你的样式代码永远不会被上传。
- 分类
- 开发者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
参考资料
隐私
除非另有说明，否则你的数据永远不会离开浏览器。CSS 预处理器转换工具 完全在客户端运行 — 无需上传服务器，不记录日志，不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分，收集成就，与全球创作者建立联系。