CSS 格式化工具（CSS、SCSS、LESS）
格式化压缩或杂乱的 CSS、SCSS 和 LESS：每行一条声明、嵌套规则缩进、选择器分行、十六进制颜色小写，还可按字母排序属性。
压缩过的样式表和复制来的代码片段既难读又难改。本格式化工具会重建结构：每条声明独占一行，嵌套块多缩进一级，用逗号分隔的选择器分成多行，并在子代、兄弟和相邻组合符两侧加空格。它理解 SCSS 和 LESS 的嵌套、& 父选择器、#{} 插值和 // 注释，字符串和 url() 则保持原样。
使用方法
- 粘贴 CSS、SCSS 或 LESS（压缩的或杂乱的都可以）。
- 选择 2 个空格、4 个空格或制表符。
- 决定是否保留规则之间的空行。
- 可选：把十六进制颜色转为小写，或按字母顺序排序属性。
- 复制格式化后的代码。
计算公式
选择器, 选择器 { 属性: 值; } → 每行一个选择器、每行一条声明、每个嵌套层级缩进一次
文本会被拆分为词法单元，所以引号、注释、url() 和 #{} 里的花括号、冒号和分号都不会被当作结构。值之间只保留单个空格，逗号后和 !important 前留空格。块中最后一条声明会补上缺失的分号。花括号不匹配时会报告行号和列号，而不是输出损坏的结果。
示例
示例 .card,.card--wide{padding:16px 24px;border:1px solid #DDD;…} 会变成 .card, 和 .card--wide { 两行，后面缩进排列四条声明，例如 border: 1px solid #ddd; 和 box-shadow: 0 1px 2px rgba(0, 0, 0, .08);。媒体查询变为 @media (max-width: 600px) {，其中的两条规则缩进在内部。工具总共报告 5 条规则（含媒体查询）和 8 条声明。
常见问题
格式化会改变 CSS 的行为吗？
不会。只有空白、末尾的分号以及（勾选时）十六进制颜色的大小写会变化。如果同一条规则里既有 margin 这样的简写，又有 margin-top 这样的展开属性，它们的先后顺序决定哪个生效，排序就会有影响，所以这类规则会保持原来的顺序。有一个例外：值中含有花括号（{ }）的自定义属性会像嵌套块一样排版，并在内部加上分号——格式化后请检查这类值。
能格式化 SCSS 和 LESS 吗？
可以整理排版：嵌套规则、mixin、@include、变量和插值都会像 CSS 一样缩进。它不会编译，变量和 mixin 保持你写的样子。
为什么注释被移到了单独的一行？
规则或声明之间的注释会单独占一行；值内部的注释则保留在原处。
我的代码会被上传吗？
不会，格式化在你的浏览器中完成。
最后更新:
包含这些输入的页面地址： https://kakao.mobile/zh/tools/css-beautifier/
引用此工具
kakaoCalc. (2026, November 8). CSS 格式化工具（CSS、SCSS、LESS）. https://kakao.mobile/zh/tools/css-beautifier/
“CSS 格式化工具（CSS、SCSS、LESS）.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/css-beautifier/.