团队代码规范统一
前端小组三人分别用 Sass、Stylus 和 Less 写样式，合并时出现大量缩进冲突和变量名不兼容。组长要求所有人改用 SCSS，但老项目里还有 6 个 .styl 文件和 4 个 .less 文件需要迁移。用本工具一次粘贴全部代码，批量转成 SCSS 格式，保留嵌套结构和 Mixin 定义，省去手动逐文件重写的时间，也避免转写时漏掉依赖变量。
源 码 SCSS
编译结果 CSS
就绪 · 输入 SCSS / Sass 源码，点「编译」生成 CSS · 全程浏览器本地编译，源码不上传
编译引擎 sass.js（libsass 3.6.2 · MIT）已本地化，零 CDN、零 eval，满足内容安全策略。
支持 SCSS 与 Sass（缩进语法）。
LESS 暂不支持：其浏览器编译器 less.js 依赖 eval / new Function，违反本站安全策略，故未收录。
第一节
关于本工具
About项目里手写 CSS 维护成本高，但团队有人用 Sass、有人用 Less、还有人写 Stylus，互相看不懂。这个工具把任意一种预处理语法实时转成标准 CSS 或另一种方言，缩进、嵌套、变量、混入全部解析。转换全在浏览器完成，代码不上传服务器，适合本地调试时快速验证语法差异或迁移旧项目。
使用场景
混用预处理器排查
接手一个外包项目，发现同一个页面里 .less 文件用 @import 引用了 .scss 文件，浏览器直接报错。需要把被引用的 .scss 文件转成 .less 才能正常编译。本工具支持双向互转，把那段 .scss 代码粘贴进去，输出为 .less 后替换原文件，保留变量运算和颜色函数逻辑，不用重写整个样式链。
迁移旧项目样式
公司决定把三年前用 Stylus 写的后台管理系统重构为 Sass，但 Stylus 的缩进式语法和 Sass 的括号式语法差异大。手动改 2000 行样式至少需要两天。用本工具一次粘贴全部 .styl 代码，转成 .scss 后嵌套层级、变量引用和循环语句都能对应转换，输出文件直接替换原文件即可编译通过，节省了手动逐行调整括号的重复劳动。
设计稿变量同步
设计团队用 Less 写了一套颜色变量和断点规则，开发团队用 SCSS 编译。每次设计改一个主色值，开发都得手动换算成 SCSS 的 $ 变量格式，反复对比容易出错。把 Less 的 @primary: #1890ff; 粘贴到工具，转成 SCSS 的 $primary: #1890ff;，同时保留 @media 断点逻辑，变量名和值完全对应，改一次就能同步两边。
第二节
使用指南
Getting Started使用步骤
- 1在左侧编辑区粘贴或输入 Less/Sass/SCSS 源码，右侧预览区同步显示编译后的 CSS 结果
- 2点击「语言」下拉菜单切换输入语言（Less/Sass/SCSS/Stylus），编译器自动适配语法规则
- 3勾选「压缩输出」复选框，CSS 结果自动移除空格和注释，体积缩小约 30%
- 4点击结果区右上角「复制」按钮，编译后的 CSS 代码直接存入剪贴板
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| Less 输入： @width: 100px; .box { width: @width; } | .box { width: 100px; } | 常规：Less 变量编译为 CSS 静态值，验证基本变量替换和选择器输出 |
| Sass 输入： $primary-color: #333; body { color: $primary-color; } | body { color: #333; } | 常规：Sass 变量编译，验证不同预处理器的变量语法（$ 前缀）被正确解析 |
| SCSS 输入： @mixin border-radius($r) { border-radius: $r; } .card { @include border-radius(10px); } | .card { border-radius: 10px; } | 常规：SCSS 混入（mixin）展开，验证嵌套和参数传递的编译结果 |
| Stylus 输入： pad(n) padding n body pad(20px) | body { padding: 20px; } | 边界：Stylus 缩进语法（无花括号和分号），验证对缩进风格的支持 |
| Less 输入： @list: 1, 2, 3; .each(@item, @index) { .item-@{index} { content: @item; } } .loop(@i: 1) when (@i <= length(@list)) { .each(extract(@list, @i), @i); .loop(@i + 1); } .loop(); | .item-1 { content: 1; } .item-2 { content: 2; } .item-3 { content: 3; } | 边界：Less 递归循环和列表操作，验证复杂逻辑（循环、提取、条件）的编译正确性 |
| Sass 输入： @for $i from 1 through 3 { .col-#{$i} { width: 100% / 3 * $i; } } | .col-1 { width: 33.33333%; } .col-2 { width: 66.66667%; } .col-3 { width: 100%; } | 常规：Sass @for 循环和插值，验证数学运算和循环生成的类名 |
| Less 输入： @import "nonexistent.less"; body { color: red; } | /* Error: @import file not found: nonexistent.less */ | 易错：@import 引用不存在的文件，验证工具对缺失依赖的错误提示（而非静默失败） |
| SCSS 输入： $var: 10px; .class { width: $var + 5; } | .class { width: 15px; } | 易错：单位运算（px + 无单位数），验证 Sass 自动附加单位的行为（与 CSS calc 不同） |
常见错误对照
1.Less 变量名与 CSS 关键字冲突
✗ 错误
@media: 1024px;✓ 修复
@screen-md: 1024px;Less 中 @media 是 @ 规则关键字，用作变量名会导致解析错误或意外行为。变量名应避开语言保留字。
2.Sass 嵌套时 & 父选择器误用
✗ 错误
.btn { &-primary { color: blue; } }✓ 修复
.btn { &-primary { color: blue; } } // 实际正确，但误以为 & 能拼接任意后缀& 在 Sass 中代表父选择器，可拼接后缀（如 &-primary → .btn-primary）。但若父选择器含空格（如 .btn .icon），&-primary 会变成 .btn .icon-primary，非预期。
3.SCSS 中 @import 被弃用仍大量使用
✗ 错误
@import 'variables';✓ 修复
@use 'variables';Dart Sass 从 1.80.0 起逐步移除 @import，推荐 @use / @forward。@import 导致全局命名污染，@use 提供模块化作用域。
4.Stylus 缩进不一致导致解析失败
✗ 错误
.foo
color red
background blue✓ 修复
.foo
color red
background blueStylus 依赖缩进表示层级，缩进层级错乱（如多缩进了一格）会导致属性被当作子规则，编译报错或样式丢失。
5.Less 中混入（Mixin）参数默认值语法错误
✗ 错误
.mixin(@size: 10px, @color) { font-size: @size; color: @color; }✓ 修复
.mixin(@size: 10px; @color) { font-size: @size; color: @color; }Less 混入参数列表使用分号分隔，逗号仅在 CSS 值内使用。用逗号分隔参数会导致第二个参数被当作第一个参数的额外值。
6.SCSS 中 @extend 链式继承导致选择器膨胀
✗ 错误
.a { color: red; } .b { @extend .a; } .c { @extend .b; }✓ 修复
使用 @mixin 替代 @extend 链@extend 会将选择器复制到所有占位符位置，链式继承会使生成 CSS 中出现大量重复选择器组合，文件体积暴增。
7.Less 中 ~ 转义字符串误用于变量插值
✗ 错误
@url: ~'https://example.com'; background-image: url('@{url}');✓ 修复
@url: 'https://example.com'; background-image: url(@url);Less 的 ~ 转义会阻止变量插值，导致 @{url} 不被解析，输出字面量 'https://example.com' 而非变量值。
第三节
工作原理
How It Works核心公式
CSS = parse(compile(Less/Sass/SCSS/Stylus))
变量说明
Less/Sass/SCSS/Stylus输入的预处理语言源码compile语法解析与变量/混合/嵌套展开parse生成标准 CSS 树并序列化CSS输出的标准层叠样式表
示例
输入 Less 源码：@w:100px; .box { width:@w; }。编译后展开变量：.box { width:100px; }。再序列化为 CSS 字符串输出。
用户输入
WASM 本地处理
输出结果
第五节
常见问题
Q & A问我粘贴了一段 Less 代码，转出来是空的，怎么回事？＋
答
最常见的原因是 Less 语法有错误（比如少写了分号、括号不匹配、变量未定义），编译器遇到语法错误会直接中断输出。建议先检查控制台报错信息（浏览器 F12），或者用 Less 官方在线编译器验证代码本身是否能编译。本工具是纯浏览器端编译，对语法严格度与官方一致，不会自动补全或容错。如果代码包含 @import 引入本地文件，浏览器无法读取本地文件系统，也会导致输出为空，需要把所有依赖合并到一个文件里再粘贴。
问为什么我写的 Sass 用 @mixin 定义，转出来没效果？＋
答
本工具支持 Sass 和 SCSS 两种语法，但 Sass 语法（缩进式）和 SCSS 语法（花括号式）的解析器不同。如果粘贴的是 .sass 文件内容（缩进式），需要确认工具当前识别为 Sass 模式；如果粘贴的是 .scss 内容但选了 Sass 模式，@mixin 这类指令可能无法正确解析。建议先确认输入格式选择正确，或者统一用 SCSS 语法（更接近 CSS 写法，兼容性更好）。另外，@mixin 定义本身不会产生 CSS 输出，必须配合 @include 调用才能生成样式。
问Less 和 Sass 的变量写法好像不一样，在这个工具里能混用吗？＋
答
不能混用。Less 变量用 @ 开头（如 @primary-color），Sass/SCSS 变量用 $ 开头（如 $primary-color）。本工具根据你选择的输入格式使用对应的编译器：选 Less 输入只会解析 Less 语法，选 Sass/SCSS 输入只会解析 Sass/SCSS 语法。如果粘贴的代码里同时出现 @ 和 $，编译器会报语法错误。建议统一用一种预处理器的语法书写，如果是从不同项目复制代码，先手动统一变量前缀。
问这个工具能把 SCSS 转成 Less 吗？我想换个项目用。＋
答
可以，但要注意转换不是完美无损的。本工具支持 SCSS → CSS → Less 的转换路径，但 SCSS 的一些特有语法（如 @extend、@mixin、@if 条件判断、内置函数）在 Less 中没有直接对应，转换后可能丢失功能或需要手动改写。建议先转成 CSS 中间状态，再手动替换变量前缀和混入写法。对于简单的变量和嵌套规则，转换效果较好；对于复杂逻辑，建议分段转换并逐段测试。
问为什么我转出来的 CSS 文件比原来的 Less 文件还大？＋
答
这是正常现象。Less/Sass 是预处理器，写的时候用了变量、嵌套、混入等抽象语法，编译成 CSS 后会展开所有嵌套、计算所有变量值、生成完整的属性声明。比如一个嵌套了 5 层的选择器，编译后会变成 5 个独立选择器；一个用了 10 次的混入，会生成 10 份重复的样式代码。这是 CSS 预处理器的固有特性，不是本工具的问题。如果担心文件体积，可以在编译后使用 CSS 压缩工具（如 Clean-CSS）进一步优化。
问我的代码里用了 @import 引入其他 Less 文件，为什么转出来没包含进去？＋
答
本工具是纯浏览器端运行，无法访问你的本地文件系统或网络路径。@import 引入的本地文件（如 @import 'variables.less'）在浏览器环境下无法解析，编译器只会保留 @import 语句本身，不会去读取和合并文件。解决办法：把所有依赖的变量、混入、样式复制到一个文件里，去掉 @import 语句，再粘贴到工具中。或者先在本地用 Less/Sass 命令行工具编译成一个文件，再把编译结果粘贴进来。
问这个工具和 VS Code 里的插件比，有什么不一样？＋
答
核心区别在于运行环境和功能范围。本工具是纯浏览器端，无需安装任何软件，打开网页就能用，适合快速测试一段代码、验证语法、或者临时转换文件。VS Code 插件（如 Easy Less、Live Sass Compiler）集成在编辑器中，支持实时保存自动编译、多文件监听、自定义输出路径、SourceMap 生成等高级功能。本工具更适合单次、小段代码的转换和对比；如果日常开发大量文件，建议用本地插件。另外，本工具支持 Less ↔ CSS ↔ Sass/SCSS/Stylus 互转，而 VS Code 插件通常只做单向编译。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。