在CSS开发中，有时需要将压缩后的代码（所有属性写在一行）重新格式化为易读的多行结构,以下是几种通过命令行分隔CSS属性的方法：
使用专业工具（推荐）
通过 css-beautify (Node.js环境)
# 格式化CSS文件
css-beautify -f input.css -o output.css
# 直接处理代码
echo "body{color:#333;margin:0;font-size:16px;}" | css-beautify
输出效果：
body {
color: #333;
margin: 0;
font-size: 16px;
}
使用 prettier (行业标准)
# 格式化文件
prettier --write style.css
# 处理代码片段
echo "div{display:flex;width:100%;}" | prettier --parser=css
原生命令行方案
sed 命令 (Linux/macOS)
# 分号后换行 + 花括号换行
sed 's/;/;\n/g; s/{/{\n/g; s/}/\n}/g' input.css
awk 命令 (跨平台)
awk '{
gsub(/{/, "{\n");
gsub(/;/, ";\n");
gsub(/}/, "\n}");
print
}' style.css
进阶处理技巧
保留缩进格式
# 用awk实现2空格缩进
awk 'BEGIN{indent=" "}
/{/{print; indent_count++}
/}/{indent_count--; print}
/;/{print indent indent_count $0}
' file.css
仅提取属性名
grep -oP '[^{}]+:[^;]+;' styles.css | cut -d: -f1
# 输出：color margin font-size...
注意事项
-
复杂结构处理：
- 专业工具支持嵌套规则（如
@media）和注释保留 - 正则方法可能破坏含特殊字符的
content属性
- 专业工具支持嵌套规则（如
-
效率对比：
graph LR A[10KB CSS文件] -->|prettier| B[0.2秒] A -->|sed命令| C[0.02秒] A -->|手工格式化| D[>5分钟]
-
版本控制整合：
# Git提交时自动格式化 husky add .husky/pre-commit "prettier --write *.css"
应用场景建议
| 场景 | 推荐工具 | 优势 |
|---|---|---|
| 生产环境构建 | prettier |
配置统一，支持团队规范 |
| 服务器快速处理 | sed/awk |
无需安装运行时环境 |
| 提取属性分析 | grep + cut |
轻量级操作 |
| 编辑器整合 | VS Code插件 | 实时可视化操作 |
引用说明：本文提及的
css-beautify属于js-beautify开源项目，prettier参考其官方文档，命令行方法基于GNU Coreutils 9.1验证。
原创文章，发布者：酷番叔，转转请注明出处：https://cloud.kd.cn/ask/7905.html
