Stylus转CSS

这是双向整理器，不是完整 Stylus 编译器

页面支持 CSS → Stylus 与 Stylus → CSS 两个方向。默认方向是 CSS → Stylus：由于普通 CSS 可以作为 Stylus 输入使用，工具会原样复用 CSS 文本，不会自动提取变量、合并选择器或改写为无花括号语法。反向转换会按行读取常见缩进写法，补上花括号、冒号和分号，适合快速整理简单片段。

这一区别很重要：搜索“Stylus 转 CSS”时，很多人期待完整编译变量、函数、混入、导入和选择器插值；本页没有实现这些语义。复杂项目应在正式 Stylus 编译环境中构建，本页结果只应视为可继续检查和编辑的草稿。

轻量转换具体会怎样改写

• 缩进更深的下一行会被视为当前行的子块，并补上 { }。
• color #333 这类叶子行会变成 color: #333;。
• primary = #1890ff 会被改写成 --primary: #1890ff;，但后续出现的 primary 不会自动替换成 var(--primary)。
• 整行以 // 开头的注释会被丢弃；空行会尽量保留。
• 嵌套选择器只是按缩进保留成嵌套块，不会像完整 Stylus 编译器那样展开父子选择器或解析 &。

例如输入 .card，下一层依次写 color #333 与 padding 12px，会得到带花括号的 .card { color: #333; padding: 12px; } 结构。这个基本示例可以复现；含函数或变量引用的输出则需要人工复核。

与正式 Stylus 语义的核验依据

把结果变成可用样式的工作流

1. 确认转换方向

   点击方向按钮切换 CSS → Stylus 或 Stylus → CSS。切换时，当前输出会成为新的输入，原输出区会清空。

2. 先用小片段试转换

   从一个选择器和两三个普通属性开始，或载入页面示例。Stylus 输入应保持一致缩进，避免在同一层混用难以辨认的空格与制表符。

3. 点击转换并检查结构

   重点检查闭合花括号、嵌套选择器、变量引用、函数调用与注释。输出区不会替你验证浏览器兼容性。

4. 复制后在项目环境中验证

   把结果放入实际构建流程或浏览器测试页，确认最终选择器和计算值。复杂语法应回到官方 Stylus 编译器处理。

常见转换疑问

转换边界与检查清单

输出“看起来像 CSS”不代表它已经通过完整语法编译。变量引用、父选择器、函数、混入、条件、循环、导入、插值、媒体规则和复杂表达式都可能需要人工修正。

• 缩进决定块层级；异常缩进可能让花括号提前闭合或包住错误内容。
• 工具不会把嵌套选择器展开成传统扁平 CSS，也不承诺所有浏览器都能执行保留下来的嵌套结构。
• 转换前保留原始 .styl 文件；复制结果后使用实际项目的构建器、代码检查器和目标浏览器验证。
• 不要把旧文所称的“完整保留变量、混入和注释”当作当前能力；真实行为以上述轻量规则为准。