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

【问题标题】：Emmet custom html snippet for meta media query用于元媒体查询的 Emmet 自定义 html 片段
【发布时间】：2015-04-08 18:30:21
【问题描述】：

我想在 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，我在标题为“sn-ps”的部分下添加了这段代码：{ ...

// 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”组合成一个缩写 - 链接：媒体 - 当点击一次 TAB 时，会导致在“min-width”之后，所以我可以输入第一个像素值，第二次点击 TAB 时，它将转到“最大宽度”之后，所以我可以输入第二个像素值。

有人做过类似的事情吗？

【问题讨论】：

标签： html emmet

【解决方案1】：

好的，我找到了解决方案。

首先，这个位置有一个sn-ps.json文件：

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

它列出了所有缩写，所以我查看了“html”，然后找到了“link:css”。我用这个作为我自己的 sn-p 的模板。

接下来，我在这个位置打开了 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\" />"
        }
    },

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

【讨论】：