Select Sublime Text 中的媒体查询和内容

Question

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

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

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

有人能帮忙吗？

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 ...）。保存后，您可以通过以下任一方式使用此插件：-

最快最简单的方法是在 sublime 控制台输入中键入 view.run_command("highlight_media_query") 并在您位于所需的 css 文件中时按回车键（按 ctrl/cmd + ` 访问控制台）。
如果您经常这样做，可以将其绑定到键盘快捷键。为此，您必须在 User 目录中创建一个 .sublime-keymap 文件（键盘映射文件名并不重要，但作为惯例，它通常保留 Default (os).sublime-keymap 其中 os = Windows, Linux or OSX 基于你的 OS)。然后粘贴以下内容（键绑定由您选择，只要不与现有键绑定冲突即可）：-

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

这样做并按下上述键绑定（您需要打开上述 css 文件），现在应该 select 所有 @media print 查询。

Select Sublime Text 中的媒体查询和内容

Select media query and contents in Sublime Text

sublimetext3