如何轻松提取CSS样式表中的所有媒体查询？

Question

目前我有一个非常庞大的css文件，其中代码行数超过2000行。现在在这个文件中，到处都是媒体查询，基本上是非常松散的编码组织。

我希望能够将所有这些媒体查询从该文件中提取出来，放入一个名为responsive.css的样式表中，这样我就可以在需要时有条件地关闭这些查询。

现在问题是最快的方法是什么？是否有程序或脚本可以自动完成这个繁琐的任务，因为现在我正在手动完成它。

- Patoshi パトシ

---

一定有更好的方法 :-/ - Chuck Le Butt

找到它并让我知道。否则开发人员将需要学习VIM的强大功能。 - Patoshi パトシ

挑战接受 :) - Chuck Le Butt

嘘，看看使用PostCSS的postcss-extract-media-query。 - Harry Theo

我从未能够正确地使用postcss-extract-media-query。我编写了一个简单的webpack插件来完成这个任务 - extract-css-media-queries。 - Erin

Answer 1

如果您有Sublime Text或Visual Studio Code（或任何其他支持正则表达式搜索和查找所有选项的IDE），那么非常简单：

1. CMD+F 查找
2. 使用以下正则表达式匹配所有@media查询：

@media[^{]*\{(?:(?!\}\s*\}).)*}}

3. 点击“查找全部”
4. CMD+C复制
5. 打开一个空白文档并粘贴它们 CMD+V

超级快速和简单。

- Chuck Le Butt

Answer 2

我使用VIM编辑器进行提取过程。当我在@media部分的起始行时，我会进入可视模式（v），然后将光标放在媒体查询的起始括号{上。现在我按%跳转到该媒体查询的匹配括号。这实际上会突出显示媒体查询中的所有内容。

现在，我用dd剪切代码片段，并将其粘贴到我打开的另一个文件中，该文件具有分割窗口视图（:split responsive.css）。要在分割窗口之间来回跳转，您可以使用ctrl-ww。

这实际上加快了提取媒体查询的速度，比逐行查找媒体查询结束位置要快得多。甚至可以在vim中编写宏脚本来实现此操作，但这是一个全新的帖子。欢迎其他人发布解决方案！

- Patoshi パトシ