CSS格式化

CSS 格式化/压缩
工具简介

CSS 在线格式化工具支持 CSS/SCSS/LESS 三种语法,提供美化、压缩、属性排序、CSS 校验、属性提取等功能。可按规则类型自动分组(布局/盒模型/文字/背景)、按字母排序属性、控制缩进风格。适合整理老项目样式表、压缩线上 CSS、阅读压缩后的源码、提取页面配色和字体信息。所有处理在浏览器本地完成,代码不上传。

使用步骤
1
粘贴 CSS
在输入框粘贴 CSS/SCSS/LESS 源码,或拖入 .css/.scss/.less 文件。
2
选择格式化选项
选择缩进空格数、是否按字母排序属性、是否分组(布局/盒模型/文字等)。点击「格式化」执行。
3
压缩或提取
需要压缩就点「压缩」得到单行 CSS;需要提取就切换到「提取」标签,查看所有颜色/字体/选择器使用统计。
常见问题
CSS 校验能发现哪些错误?

常见错误:缺分号、缺大括号、属性拼写错误(工具会有智能提示)、未知伪类、未闭合的 /* */ 注释、SCSS 嵌套语法错误。校验通过后会显示绿色对勾。

CSS 压缩会破坏功能吗?

标准压缩(去掉空白和注释)不会,所有现代浏览器效果一致。高级压缩(合并相同选择器、移除冗余属性)某些极端情况可能改变优先级,建议压缩前备份原始 CSS。

如何提取页面使用到的所有颜色和字体?

点击「提取」标签,工具会扫描整个 CSS,列出所有 color、background、font-family 等值,按使用次数排序,方便提取设计 token 整理到设计系统。

支持 SCSS/LESS 吗?

支持格式化和压缩,工具会保留 SCSS 变量($color)、嵌套语法、@mixin/@include 指令。但 SCSS 编译(展开变量和 mixin)不在本地工具范围,需要 sassc 编译。