我可以将 css 属性快捷方式添加到 sublime 文本吗？答案

【问题标题】：Can i add css property shortcuts to sublime text?我可以将 css 属性快捷方式添加到 sublime 文本吗？
【发布时间】：2013-08-12 23:35:34
【问题描述】：

我可以在 SublimeText 中添加更多这样的快捷方式吗？

就像"m-a" 一样会扩展为margin: 0 auto; ？

如果有人问过这个问题，我深表歉意。我找不到答案。

【问题讨论】：

标签： html tags sublimetext2

【解决方案1】：

这些被称为snippets。对于这个特定示例，打开Tools 菜单并选择New Snippet...，然后粘贴以下内容：

<snippet>
    <content><![CDATA[margin: 0 auto;]]></content>
    <tabTrigger>m-a</tabTrigger>
    <scope>source.css</scope>
</snippet>

将此文件另存为Packages/User/CSS/margin auto.sublime-snippet，您应该一切顺利。打开一个 CSS 文件，输入 m-a，点击 Tab，一切就绪。片段非常强大，并且还允许制表位输入自定义数据。例如，您可以设置一些只要求自定义颜色的样板代码，如下所示：

<snippet>
    <content><![CDATA[body {
    max-width: 500px;
    _width: 500px;
    padding: 30px 20px 50px;
    border: 1px solid ${1:#b3b3b3};
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: 0 1px 10px ${2:#a7a7a7}, inset 0 1px 0 ${3:#fff};
    background: ${4:#fcfcfc};
}
$5
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>setbody</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.css</scope>
</snippet>

当您点击 Tab 来触发 sn-p 时，border 属性中的 #b3b3b3 会突出显示，可以进行编辑。完成后，再次点击 Tab 以转到 box-shadow 中的第一个颜色定义，等等。最后的 Tab 将您留在括号之外，为您的下一个做好准备选择器。

【讨论】：