SCSS Formatter

SCSS 格式化器可美化和压缩 SCSS/Sass 代码。工具处理 SCSS 特有的语法元素：$ 变量、@mixin 混合、@include 调用、@extend 继承、嵌套选择器、@if/@else/@for/@each/@while 流程控制、@function 自定义函数、@use/@forward 模块系统等。格式化时统一缩进（2 或 4 空格）、在规则间添加空行、对齐属性值、排序属性声明。压缩模式将所有代码压缩为一行，适合生产环境部署。

SCSS 格式化器在前端团队中是最常用的代码质量工具之一。大型前端项目（特别是使用 Angular 或 Vue 的团队）通常在 CI/CD 管道中要求 SCSS 代码格式一致性，开发者提交前先用格式化器处理。代码审查时，标准化格式消除了因空格和换行偏好不同产生的无意义 diff。从 Dart Sass 迁移到 Sass Modules（@use/@forward）时，格式化器帮助统一新语法风格。前端面试中编写组件样式后格式化以展示专业编码习惯也是常见场景。

配合 CSS 格式化器 处理编译输出，或使用 Less 格式化器 对比预处理器之间的语法差异。

SCSS 是 Sass 的 CSS 超集语法，格式化器需处理以下关键特性：

• 变量系统：$primary-color: #333; 变量默认值 !default 标志的处理
• Mixin 与继承：@mixin 定义和 @include 调用的参数列表格式，@extend 选择器链的格式化
• 控制指令：@if、@else if、@each、@for、@while 块及其内部 CSS 属性的二级缩进
• Map 和 List：($key: value) 字典和值列表的格式化，保持逗号分隔的一致性

• 插值语法：#{$variable} 选择器或属性名中的插值不能被误解释为注释。格式化时需保留插值语法完整性。
• 多行注释：/*! 开头的 loud comment 即使在压缩模式下也应保留，这些注释通常包含版权和许可信息。
• @import vs @use：新的 Sass 模块系统（@use、@forward）与传统 @import 的格式化规则可能不同——@use 通常放在文件最顶部。
• 选择器嵌套层数：格式化器不会限制嵌套深度，但开发者应自觉将嵌套控制在 3 层以内以避免过于特化的选择器。

在清理遗留 SCSS 代码、准备 Pull Request 前的代码格式化、或从压缩生产代码恢复可读性时使用此工具。对于项目的持续格式化需求，推荐在 CI/CD 中集成 Stylelint 和 Prettier 的 SCSS 插件，或在 VSCode 中设置保存时自动格式化。