CSS 预处理器转换工具

使用方法

1. 1 选择源语言和目标语言。
2. 2 粘贴你的样式表。
3. 3 结果会随输入实时显示。较大的库仅在首次需要转换时才会加载。
4. 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 的方向。
• 其余转换方向采用启发式变换（替换变量符号、重新格式化括号/缩进）——速度快，但不是完整的转译。
• 全程在客户端处理——你的样式表绝不会离开浏览器。

常见问题

什么是 CSS 预处理器转换工具？

CSS 预处理器转换工具可在浏览器中直接对 LESS、SCSS、SASS、Stylus 与纯 CSS 之间的样式表进行转换。对于最终编译为 CSS 的方向，工具会调用真实编译器；对于其他转换方向，则采用启发式变换在各预处理器格式之间转写语法，整个过程完全在客户端完成。

功能特性

示例

.a { .b { color: red; } }   (SCSS)

.a .b {
  color: red;
}

常见使用场景

1. 1

   Compile SCSS to CSS

   Flatten nested SCSS into plain CSS for a quick paste or a build-free page.

2. 2

   Migrate between preprocessors

   Move a stylesheet from LESS to SCSS (or vice versa) when switching toolchains.

3. 3

   Understand compiled output

   See exactly what CSS your SCSS nesting and variables produce.

References

• Sass Documentation — Sass
• Less Documentation — Less
• CSS — MDN — MDN

相关工具