格式化器会编译 SCSS 或 Less 吗？

不会。当前页面处理 CSS；专门的 SCSS 与 Less 页面保留源语言，也不能替代各自编译器。

压缩成功就能证明渲染完全一致吗？

不能。优化策略可能改变表示并依赖特定假设，应检查差异，并在真实应用及目标浏览器中测试受影响的规则。

兼容性诊断是完整的浏览器支持数据库吗？

不是。报告只提供待核对线索，版本、层叠层、特性组合和回退行为仍需实际渲染验证。

Web 开发

CSS 格式化与压缩

使用语法感知的处理流程格式化、美化、诊断和压缩 CSS，并明确区分保守压缩与 CSSO 结构优化。

在线工具价格方案

输入0 个字符

结果0 个字符

想要更顺手的原生工作流？

把「CSS 格式化与压缩」放到一个快捷键里。

DevSexy Mac 版保留同样私密的本地处理，同时提供全局快捷键；不用管理浏览器标签页，需要时直接呼出。

全局快捷键可离线使用本地处理

免费试用 Mac 版

当前浏览器工具仍然免费。

3 种操作 · 3 种不同承诺

先决定允许机器改动到哪一步。

格式化、诊断和压缩都要求源码能够被正确解析，但它们会进入不同处理流程。先选清楚要的是可读排版、错误线索，还是更少字节，再判断输出是否符合预期。

格式化

PostCSS AST → 可读 CSS

统一缩进、空格和换行

诊断

Parser → 解析证据

定位语法问题，并说明检查边界

压缩

保守清理 / CSSO

减少注释、空白或进一步优化结构

现代 CSS 压力样本

今天的 CSS，不止是二十年前的属性声明。

这些片段会同时考验层叠层、原生嵌套、自定义属性、特性查询、数学表达式和感知颜色。真正有用的格式化器必须先正确理解它们。

@layer

@layer components { … }

保留作者定义的层叠层顺序

原生嵌套

.card { &:hover { … } }

父选择器仍与嵌套规则相连

设计 Token

:root { --space: 1rem; }

完整保留自定义属性名

@supports

@supports (color: oklch(0 0 0))

条件规则保持正确嵌套

数学表达式

width: calc(100% - var(--space))

让运算间距清晰可读

现代颜色

color: oklch(72% .18 145)

保留现代颜色函数 token

字节预算流水线

更小是一条处理路径，不是“更漂亮”的同义词。

格式化可能让文件变大。默认保守压缩只清理普通注释和多余空白，不重组规则；Maximum preset 会交给 CSSO，并启用 declaration 与 rule 的结构优化。

原始源码

基准

保留原始空白、注释和换行

格式化

可能增大

为阅读重新排版，字节增加很正常

保守压缩

通常更小

收紧空白并删除普通注释，不调整规则结构

Maximum preset

需主动选择

CSSO 清理、短写并合并或重组结构

Parser 定位线索

先修复最早断裂的语法边界。

一个没有闭合的代码块，会改变解析器理解后续每个 token 的方式。最早出现的行列位置，比笼统的“CSS 无效”更有价值。

ParseError · 第 1 行打开的代码块未闭合

.card {
  color: var(--ink);
  &:hover {
    color: oklch(70% .2 145);
  /* 缺少两个结束花括号 */

先闭合嵌套规则，再闭合父规则。重新运行诊断后，再处理后续 declaration。

层叠边界法庭

解析成功，仍然不能证明这些事情

超出格式化器的判断范围

Specificity 是否符合意图

合法选择器仍可能覆盖不该覆盖的规则。

选择器是否未使用

格式化器看不到应用实际渲染出的 DOM。

目标浏览器是否支持

parser 能识别现代语法，不代表目标浏览器能够执行。

视觉结果是否等价

只有真实渲染与视觉回归测试，才能判断最终像素。

运行可复现的实例

用小规则对照可读的 CSS 排版与保守压缩。

使用实例会替换当前输入、参考输入、操作与选项。以下均为公开演示数据。

缩进网格规则

两空格缩进、100 列换行，不执行样式表。

输入

.card{display:grid;gap:1rem}

声明仍按原规则排列，便于阅读。

.card {
  display: grid;
  gap: 1rem;
}

压缩简单颜色规则

使用保守预设，处理白色和零边距。

输入

.card { color: #ffffff; margin: 0px; }

查看紧凑输出与缩短的十六进制值，再决定是否替换源码。

.card{
#fff

继续处理相关任务

SCSS 格式化工具

使用 SCSS 解析器整理 Sass 变量、嵌套、Mixin 和模块语法，输出稳定可审查的 .scss 源码，不执行编译。

LESS 在线格式化工具

格式化 LESS 变量、mixin、嵌套选择器和规则，不执行编译，也不生成 CSS。

CSS 颜色空间转换器

转换 HEX、RGB、HSL、OKLCH 与 Display P3 等现代 CSS 颜色，并检查实际合成后的对比度。

在 DevSexy Mac 应用中重复处理

反复处理本地数据时，可通过 Option 快捷键打开原生应用，离线使用工具。

直接回答

什么是 CSS 格式化与压缩？

在线使用 Prettier/PostCSS 格式化和检查现代 CSS，或选择保守压缩与 CSSO 深度压缩；源码只在浏览器本地处理，不上传，也不冒充层叠规则审计。

它能做什么？

格式化
诊断
压缩

如何使用 CSS 格式化与压缩

01
准备输入
粘贴 CSS，把 SCSS 与 Less 交给对应工具。
02
选择操作
选择格式化、诊断，或明确的压缩预设。
03
核对结果
阅读警告，并在目标浏览器和真实层叠环境中检查。

常见问题

格式化器会编译 SCSS 或 Less 吗？: 不会。当前页面处理 CSS；专门的 SCSS 与 Less 页面保留源语言，也不能替代各自编译器。
压缩成功就能证明渲染完全一致吗？: 不能。优化策略可能改变表示并依赖特定假设，应检查差异，并在真实应用及目标浏览器中测试受影响的规则。
兼容性诊断是完整的浏览器支持数据库吗？: 不是。报告只提供待核对线索，版本、层叠层、特性组合和回退行为仍需实际渲染验证。