Can i add css property shortcuts to sublime text?

Question

Can I add more shortcuts like this one to SublimeText?

Like one that is "ma" that will expand to margin: 0 auto; ?

I apologize if this has already been asked. I couldn't find the answer.

Answer 1

These are called snippets . For this particular example, Open the Tools menu and select New Snippet... , then paste in the following:

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

Save this file as Packages/User/CSS/margin auto.sublime-snippet and you should be good to go. Open a CSS file, type ma , hit Tab , and you're all set. Snippets are pretty powerful, and also allow for tab stops to enter customized data. For example, you could set up some boilerplate code that only requires that the colors be customized like so:

<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>

When you hit Tab to trigger the snippet, the #b3b3b3 in the border property is highlighted, ready to be edited. When you're done, hit Tab again to go to the first color definition in box-shadow , etc. The final Tab leaves you outside the brackets, ready for your next selector.