在 Sublime Text 中选择媒体查询和内容

Question

有没有办法使用 Sublime Text 3 选择每个媒体查询及其内容？例如，我有一个包含大量 @media print 查询的 CSS 文件，我想一次性选择所有这些查询和内容。

  @media print {
      .app-contact-panel__heading,
       .app-prose-scope h3 {
          font-size: 18pt;
          line-height: 1.15;
    }
   }

我知道我可以选择一个@media print，然后按CMD + D 选择下一个。或者CTRL + CMD + D 选择文档中的所有@media print，但都不选择属性？

谁能帮忙？

Answer 1

一种方法是通过插件。以下插件突出显示以@media print {开头的媒体查询的所有内容

import sublime
import sublime_plugin

class HighlightMediaQueryCommand(sublime_plugin.TextCommand):

    def run(self, edit):
        # This finds all the regions that are @media print { 
        media_regions = self.view.find_all(r"@media print {")

        # This will clear the current Selection object.
        self.view.sel().clear()

        # We now add the region corresponding to the opening bracket of each media print query.
        for regions in media_regions:
            self.view.sel().add(sublime.Region(regions.end(), regions.end()))

        # Next, we move the selection to the end of the brackets. 
        self.view.run_command("move_to", { "to": "brackets" })

        # Now that we have access to the closing bracket of each media print query, we can construct the Region object for all media print queries with their contents also.
        for i, sel in enumerate(self.view.sel()):
            self.view.sel().add(sublime.Region(media_regions[i].begin(), sel.end() + 1))


    def is_enabled(self):
        # Enable the command to work only in a CSS file.
        return self.view.settings().get("syntax") == "Packages/CSS/CSS.sublime-syntax"

要使用此插件，您必须将此代码保存在User 目录中的.py 文件中（通过顶部菜单转到Preferences -> Browse Packages ...）。保存后，您可以通过以下任一方式使用此插件：-

1. 最快和最简单的方法是在 sublime 控制台输入中键入view.run_command("highlight_media_query")，然后在所需的 css 文件中按 Enter（按 ctrl/cmd + ` 访问控制台）。

2. 如果您经常这样做，您可以将其绑定到键盘快捷键。为此，您必须在User 目录中创建一个.sublime-keymap 文件（键盘映射文件名无关紧要，但作为惯例，它通常保留Default (os).sublime-keymap 其中os = Windows, Linux or OSX 基于您的操作系统）。然后粘贴以下内容（键绑定是您的选择，可以是任何内容，只要它不与现有的冲突）：-

[
    { "keys": ["ctrl+alt+m"], "command": "highlight_media_query" }
]

执行此操作并按下所述键绑定（您需要打开所述 css 文件），现在应该选择所有 @media print 查询。