Html To Scss

插件介绍

HTML to SCSS 是一款专为前端开发者设计的 Visual Studio Code 扩展，能够将 HTML 结构快速转换为 SCSS 嵌套样式，提升开发效率。

功能特点

• 🚀 快速转换 HTML 到 SCSS
• 🎯 智能识别 id、class、className
• 🧩 支持嵌套结构
• ⚡ 自动处理自闭合标签
• 🛠️ 多 class 处理

使用教程

• 选中 HTML 代码
• 右键选择 "HTML 转换为 SCSS"
• 查看转换结果

快捷键

• Mac: Cmd+Shift+P → 输入 "Convert HTML to SCSS"
• Windows/Linux: Ctrl+Shift+P → 输入 "Convert HTML to SCSS"

示例展示

输入 HTML

<div class="wrap">
  <div class="header"></div>
  <div class="main">
    <div class="content"></div>
  </div>
</div>

输出 SCSS

.wrap{
  .header{}
  .main{
    .content{}
  }
}

常见问题

Q1: 插件支持哪些 HTML 标签？

A: 支持所有标准 HTML 标签，包括自闭合标签。

Q2: 如何处理多个 class？

A: 插件会自动处理多个 class，生成对应的嵌套规则。