使用sed在CSS媒体查询前添加换行并保留缩进的正则方案

我来帮你搞定这个Sed表达式的问题！你的核心需求是只在;或{后面的@media前添加换行，且重复执行不会重复添加，对吧？

最终可用的Sed命令 #

sed -e 's/\([;{]\)\(\s*@media\)/\1\n\2/' styles.less

为什么这个命令能满足需求？ #

• 精准匹配目标场景：正则表达式\([;{]\)\(\s*@media\)专门匹配两种情况：
  1. ;或{后面直接跟@media（比如}@media或;@media）
  2. ;或{后面带任意空白字符（空格/制表符）再跟@media（比如} @media或;\t@media）
• 保留原有缩进：通过分组\(\s*@media\)把@media前面的空白字符一起保留，替换后不会丢失原有的缩进格式
• 避免重复添加：当你重复执行这个命令时，已经添加的换行会把;/{和@media分到两行，Sed默认逐行处理，不会再匹配到同一行里的[;{]+@media组合，自然不会重复添加换行

你原来的命令问题出在哪？ #

你之前用的sed -e 's/\([;{]\)\(\|\)/\1\n\2/' styles.less存在两个关键问题：

1. 匹配范围太广：这个表达式会给所有;和{后面都添加换行，不管后面是不是@media，不符合你的精准需求
2. 会重复添加换行：重复执行时，原来的;会被反复匹配，每次都在后面加换行，导致出现多余的空行

如果需要直接修改原文件（原地替换），可以加上-i参数（GNU Sed）：

sed -i -e 's/\([;{]\)\(\s*@media\)/\1\n\2/' styles.less

内容的提问来源于stack exchange，提问作者Beto Aveiga