Auto CSS Nest

中文 | English

功能简介

Auto CSS Nest 是一个强大的 VSCode 插件，它能自动从选定的 HTML、React 或 Vue 模板代码中提取 class 结构，并生成符合 Sass/Less/Stylus 规范的嵌套代码或普通 CSS 结构。无需手动编写复杂的嵌套关系，一键生成整洁、可维护的样式代码。

功能特性

• 🚀 一键转换 : 从选定的模板代码提取 class 直接生成 Sass 嵌套结构或 CSS 结构
• 💡 智能解析 : 支持 HTML、React 和 Vue 模板（包括静态 class）
• 🧩 多种输出格式 :
  • 生成符合 Sass 规范的嵌套选择器
  • 生成符合 Less 规范的嵌套选择器
  • 生成符合 Stylus 规范的嵌套选择器
  • 生成使用 & 符号连接的 Sass/Less 嵌套
  • 生成带父子关系的 CSS 规则
  • 生成单一平铺的 CSS 结构
• 🎨 多场景支持 :
  • 支持选择后，执行快捷键提取 class 并生成结构
  • 支持选择后，点击右键菜单提取 class 并生成结构
  • 支持选择后，生成的结构直接注入到 Vue 文件末端
  • 支持选择后，生成的结构存入剪贴板，用户可在目标位置直接Ctrl+V粘贴使用

使用方法

提取 class 生成 Sass 嵌套结构

• 1.选择一段包含 class 的代码，使用快捷键[ctrl+shift+e]，将自动生成 Sass 嵌套结构并在新标签页打开。示例如下图：

• 2.选择一段包含 class 的代码，右键菜单-选择 "Extract Class Structure to Sass"，将自动生成 Sass 代码。示例如下图：

• 3.在插件的设置中，勾选使用&符号实现Sass的嵌套生成，选中代码后右键点 "Extract Class Structure to Sass"，将生成&连接符风格的 Sass 代码。示例如下图：

提取 class 生成 CSS 结构

• 1.选择一段包含 class 的代码，使用快捷键[ctrl+shift+t]，选择输出格式，将自动生成 CSS 结构并在新标签页打开。示例如下图：

• 2.选择一段包含 class 的代码，右键菜单-选择 "Extract Class Structure to CSS"，选择输出格式，将自动生成 CSS 代码。示例如下图：

提取 class 生成 Stylus 嵌套结构

• 1.选择一段包含 class 的代码，使用快捷键[ctrl+shift+l]，选择输出格式，将自动生成 Stylus 结构并在新标签页打开。示例如下图：

• 2.选择一段包含 class 的代码，右键菜单-选择 "Extract Class Structure to Stylus"，选择输出格式，将自动生成 Stylus 代码。

提取 class 生成 Less 嵌套结构

• 1.选择一段包含 class 的代码，使用快捷键[ctrl+shift+s]，选择输出格式，将自动生成 Stylus 结构并在新标签页打开。
• 2.选择一段包含 class 的代码，右键菜单-选择 "Extract Class Structure to Less"，选择输出格式，将自动生成 Less 代码。

支持将生成的样式结构直接注入到 Vue 文件末端的<style>标签中

• 1.在插件设置中勾选将生成的样式自动注入到Vue文件末端的<style>标签中，如果同时勾选注入的样式是否添加 scoped 属性, 在 Vue 文件末端生成代码结构后，会给<style>标签添加 scoped 属性。示例如下图：

剪切板交互模式

• 1.自动注入到Vue末端不能满足用户想在目标位置直接使用的需求。那么基于剪切板的模式就完美解决了这个问题。选中目标代码片段后，执行快捷键[ctrl+shift+c], 然后提取到的 class 就转换成 sass 结构(可在配置中选择其他格式)，转换结果将自动存入剪贴板，用户在需要目标编辑位置 Ctrl+V 粘贴就可以了。示例如下图：

• 2.对于外部代码的样式提取场景：当用户在 VSCode 外复制代码时，需先执行 Ctrl+C 复制到剪贴板；返回编辑器后，在目标位置使用[ctrl+shift+v]组合键，插件将自动完成 class 的提取, 并将转化后的 sass 结构粘贴。示例如下图：

问题

如果您遇到任何问题或有改进建议，请点击这里 Issue Report

许可证

MIT © 2025 flyfox
完整协议见 MIT 文件