更新记录

1.0.0（2026-06-24） 下载此版本

• 首次发布

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

# DOM 转 SCSS

将选中的 DOM 结构一键转换为 SCSS 嵌套样式骨架，并自动复制到剪贴板。专为 uni-app、Vue、HTML 等模板开发场景设计，省去手写嵌套选择器的重复劳动。

功能特性

• 选中模板中的 DOM 片段，右键或快捷键一键转换为 SCSS 嵌套结构
• 转换结果自动写入剪贴板，随时粘贴使用
• 操作反馈通过状态栏消息呈现，3 秒后自动消失，不打断编码
• 支持自定义快捷键，并可在设置中开启 / 关闭快捷键
• 智能识别 id、class，自动按 DOM 层级生成嵌套规则

使用方法

方式一：右键菜单

1. 在编辑器中选中需要转换的 DOM 结构
2. 点击鼠标右键，选择菜单项 将选中的DOM转换为SCSS
3. 转换成功后，SCSS 代码已复制到剪贴板，状态栏提示「转换成功」，直接粘贴即可

方式二：快捷键

1. 在编辑器中选中需要转换的 DOM 结构
2. 按下快捷键 Ctrl+Alt+D
3. 转换结果同样会复制到剪贴板

转换规则

插件根据每个标签的 id 和 class 属性生成选择器，并按 DOM 嵌套层级生成对应的 SCSS 嵌套结构。

规则说明：

• 同时有 id 和 class：id 在前、class 在后组合，如 #box.container
• 多个 class：合并为组合选择器，如 class="a b" 生成 .a.b
• 既无 id 也无 class：使用标签名作为选择器，如 view
• 同级去重：同一父级下相同选择器的兄弟元素（常见于列表）只生成一次，避免重复
• 自闭合标签：input、img、br 等空标签不会产生嵌套层级

转换示例

输入（选中的 DOM）：

<view class="container">
  <view id="header" class="top">
    <text class="title">标题</text>
  </view>
  <view class="list">
    <view class="item">列表项 1</view>
    <view class="item">列表项 2</view>
  </view>
</view>

输出（已复制到剪贴板的 SCSS）：

.container {
  #header.top {
    .title {}
  }
  .list {
    .item {}
  }
}

插件设置

在 HBuilderX 中通过 工具 → 设置（或 settings.json）配置：

提示：关闭快捷键后，按下 Ctrl+Alt+D 时状态栏会提示「快捷键已禁用」。右键菜单不受此开关影响，始终可用。

自定义快捷键

插件默认快捷键为 Ctrl+Alt+D。如需修改键位或取消快捷键，可在 HBuilderX 顶部菜单 工具 → 自定义快捷键 中，找到命令 extension.domToScssByShortcut 进行修改或删除。

注意事项

• 插件仅解析静态的 id="..." 和 class="..." 属性，对于 Vue 动态绑定（如 :class="{...}"、:id="..."）不做解析，此类标签将使用标签名作为选择器。
• 生成的 SCSS 为样式骨架（空规则），具体样式属性需自行填充。

兼容性

• 适用 HBuilderX 2.7.0 及以上版本

反馈与建议

使用中遇到问题或有功能建议，欢迎反馈。