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

Question

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

就像一个"ma"将扩展到margin: 0 auto; ？

如果已经有人问我，我道歉。 我找不到答案。

Answer 1

这些被称为片段 。 对于此特定示例，请打开“ 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文件，输入ma ，点击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键触发片段时， border属性中的#b3b3b3会突出显示，可以进行编辑。 完成后，再次按Tab键转到box-shadow的第一个颜色定义等。最后一个选项卡会将您留在括号内，为下一个选择器做好准备。