CODEWITHSUNDEEP
htmltagssublimetext2
codingninja
codingninja

Reputation: 1410

Can i add css property shortcuts to sublime text?

Can I add more shortcuts like this one to SublimeText?

Like one that is "m-a" that will expand to margin: 0 auto; ?

Sublime Text 2 property shortcuts

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

Upvotes: 0

Views: 320

Answers (1)

MattDMo
MattDMo

Reputation: 102862

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 m-a, 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.

Upvotes: 2

Related Questions