用于元媒体查询的Emmet自定义html片段

Question

我想在SublimeText 2中为emmet创建一个自定义的html代码缩写。例如，我可以使用link:css，它扩展为：

<link rel="stylesheet" href="style.css">

现在我想使用link:media扩展到：

<link rel="stylesheet" media="only screen and (min-width:000px) and 
(max-width:000px)" href="style.css">

我认为我找到了解决方案的一部分，通过转到：

C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet

在这个文件中: Emmet.sublime-settings，我在标题为“snippet”的部分添加了这段代码：{ ...

// can be improved
    "html": {
        "abbreviations": {
            "link:mqm": "<link rel=\"stylesheet\" type=\"text/css\" media=\"only screen and (min-width:",
            "mqx": "and (max-width:"
        }
    }

..。但它不起作用。另外，我真的想这样做:我想把"link:mqm“和"mqx”组合成一个缩写- link:media -当我按TAB一次时，会在"min-width“之后引导，这样我就可以放入第一个像素值，第二次按TAB时，它会转到"max-width”之后，这样我就可以放入第二个像素值。

有人做过类似的事吗？

Answer 1

好了，我已经找到解决方案了。

首先，此位置有一个snippets.json文件：

C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet\emmet

它列出了所有的缩写，所以我在"html“下查找，然后我找到了"link:css”。这是我用来作为我自己的代码片段的模板。

接下来，我在下面的位置打开了Emmet.sublime-settings文件：

C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet

我发现“设置”部分实际上添加了(或者我应该说“覆盖”)前面提到的"settings.json“文件。现在，在这个“设置”部分，我添加了以下代码：

        "html": {
        "abbreviations": {
            "link:media": "<link rel=\"stylesheet\" type=\"text/css\" media=\"only screen and (min-width:${1:50}px) and (max-width:${2:500}px)\" href=\"${3:style}.css\" />"
        }
    },

..。它就像我想要的那样工作。