本工具帮助你快速将传统CSS代码转换为现代化的SCSS嵌套语法。以下是详细的使用指南：
在左侧CSS输入框中粘贴你的CSS代码，点击「转换为SCSS」按钮，工具会自动分析CSS选择器的层级关系，将重复的父级选择器合并为嵌套结构。例如 .container .header {} 和 .container .header h1 {} 会被自动识别并转换为嵌套写法，大大减少代码重复。
开启「提取重复颜色为变量」功能后，工具会扫描CSS中所有颜色值（十六进制、rgb、hsl等），自动识别出现3次以上的颜色值并提取为 $color-primary、$color-secondary 等语义化变量。这不仅提高了代码的可维护性，也方便后续进行全局主题切换。
勾选「媒体查询嵌套到选择器内部」后，工具会将CSS中的 @media 规则智能地嵌套到对应的选择器内部。这是SCSS的一大特色——你可以在组件选择器内部直接定义其响应式样式，让组件相关的所有样式（包括响应式规则）集中在一处管理，提升代码的组织性和可读性。
你可以选择输出使用2空格、4空格或Tab缩进，适应不同的项目代码风格。转换完成后，点击「复制结果」将SCSS代码复制到剪贴板，或点击「下载.scss文件」直接保存为本地文件，便于导入到项目中。
项目迁移重构：当团队决定从纯CSS迁移到SASS/SCSS时，面对成百上千行的CSS文件，手动转换耗时且容易出错。本工具可以自动完成80%以上的嵌套转换工作，显著降低迁移成本和出错概率，让开发者可以专注于手动优化转换后的代码结构。
代码审查与规范化：在代码审查过程中，如果发现团队成员的CSS代码缺乏嵌套优化，可以使用本工具快速生成建议的SCSS版本，作为代码规范化的参考。同时工具的变量提取功能可以帮助发现项目中散落的"魔法数值"，推动代码风格的统一。
前端学习辅助：对于正在学习SASS/SCSS的前端初学者，本工具提供了一个直观的学习工具——你可以编写或粘贴熟悉的CSS代码，观察工具如何将其转换为SCSS嵌套结构，从而理解嵌套规则、父选择器引用(&)和变量系统的工作原理，加速SCSS语法的掌握。
组件库样式整理：当从设计稿中提取组件样式时，通常会有大量基于BEM命名规范的CSS代码。本工具可以自动提取公共前缀进行嵌套，快速将扁平化的BEM类名转换为语义清晰的嵌套结构，使组件样式的层级关系一目了然。
SCSS嵌套编译原理：SCSS的嵌套规则在编译过程中会被展开为完整的CSS选择器。例如 .card { .title { color: red; } } 会编译为 .card .title { color: red; }。使用 & 符号可以引用父选择器，如 .btn { &:hover { background: blue; } } 编译为 .btn:hover { background: blue; }。了解这一机制有助于编写高效的嵌套代码，避免生成过长的选择器影响性能。
CSS预处理器对比：目前主流CSS预处理器包括SASS/SCSS、LESS和Stylus。SCSS凭借其完整的功能集（变量、混入、函数、控制指令、模块系统）和庞大的生态系统成为最广泛使用的选择。LESS在Bootstrap 4之前被使用，功能相对精简。Stylus的语法最为灵活但项目采用率最低。选择哪种预处理器主要取决于团队技术栈和项目需求。
嵌套深度最佳实践：虽然SCSS支持任意深度的嵌套，但过深的嵌套（超过4层）会导致编译后的CSS选择器过长、权重过高、难以覆写。推荐遵循「嵌套不超过3-4层」的原则，合理利用BEM命名和组件化思维来组织样式结构。本工具默认会进行智能嵌套，但建议转换后手动审查并适当调整嵌套深度。
与现代构建工具集成：SCSS编译已成为现代前端构建管线的标准环节。在Vite中，只需安装 sass 包并导入.scss文件即可自动编译；在Webpack中需要配置 sass-loader；Next.js内置SCSS支持；VS Code的Live Sass Compiler插件可在保存时自动编译单个.scss文件。本工具生成的SCSS代码可直接与这些构建工具协同使用。
CSS是层叠样式表的标准语法，不支持嵌套、变量、混入等功能。SCSS是SASS的现代语法版本(.scss后缀)，完全兼容CSS语法基础上增加了嵌套规则、变量($var)、混入(@mixin)、继承(@extend)等高级特性，需要编译为CSS后才能在浏览器中使用。
转换后生成的SCSS代码需要经过SASS编译器编译为CSS才能在浏览器中使用。你可以使用npm上的sass包、VS Code的Live Sass Compiler插件、或在构建工具(如Vite、Webpack)中配置SASS加载器来自动编译。
大部分CSS可以选择性地嵌套转换。工具会分析选择器的公共前缀进行合理嵌套，但有些CSS结构(如完全无关的选择器)无法嵌套。建议转换后手动检查结果，根据项目实际情况调整嵌套深度。
目前工具以SCSS格式输出(.scss)，即SASS的现代大括号语法版本。SCSS完全兼容CSS语法，学习成本更低，也是目前社区更广泛使用的SASS语法格式。如需传统缩进式SASS(.sass)，可以转换后使用sass-convert工具进行格式转换。
开启变量提取后，工具会识别CSS中重复出现的颜色值(#hex、rgb、hsl)和常用数值，自动生成$变量定义并替换原始值。这有助于保持代码的一致性，方便后续全局修改主题色等关键值。你可以选择启用或关闭此功能。
经过嵌套优化后SCSS源码通常会比原始CSS更精简，因为公共选择器前缀被合并为嵌套结构，减少了重复编写。但最终编译生成的CSS体积取决于你如何使用SASS特性——嵌套越深，编译后选择器越长。建议控制嵌套深度不超过3-4层。
支持。工具会自动识别@media规则，并将其与内部选择器进行合理的嵌套处理。你还可以选择是否将@media查询嵌套到对应选择器内部(SCSS的特色功能)，有助于将组件相关的样式和响应式规则集中管理。
不会。本工具完全在浏览器前端运行，你的CSS代码不会离开你的设备。代码转换、变量提取等所有处理操作都在本地完成，无需网络请求，保证代码隐私安全。